文章目录

• 一、盒子模型内部尺寸计算
• • 1、设置内边距和边框对盒子模型的影响
  • 2、盒子模型尺寸计算
• 二、代码示例
• • 1、盒子模型扩展尺寸示例
  • 2、盒子模型固定尺寸示例

一、盒子模型内部尺寸计算

1、设置内边距和边框对盒子模型的影响

内容尺寸 大小是 固定的 , 设置的 width 和 height 是多少 , 内容尺寸就是多少 ;

如 : 下面的 CSS 样式中 , 设置 div 尺寸为 200 x 200 像素 , 那么内容尺寸就是该大小 ;

div {width: 200px;height: 200px;
}

如果在 内容尺寸 的基础上 , 添加了 四个方向的内边距 , 则整个 盒子模型 会向四周 扩大 内边距 大小 , 下图中 div 盒子模型

• 向上扩张了 20 像素
• 向右扩张了 10 像素
• 向下扩张了 30 像素
• 向左扩张了 50 像素

div {width: 200px;height: 200px;/* 设置 上内边距 20px , 右内边距 10px ,下内边距 30px , 左内边距 50px */padding: 20px 10px 30px 50px;
}

如果 再次向外设置一个有宽度的边框 , 盒子的模型还会再扩大 边框宽度 的大小 ;

因此 , 最终的 盒子模型的大小 , 依赖于 内容尺寸 , 内边距 , 边框宽度 ;

2、盒子模型尺寸计算

上面设置 Padding 会撑大盒子 , 因此在设计 盒子模型 样式的时候 , 要提前计算好

• 内容尺寸
• 内边距
• 边框宽度
• 外边距

这四个值 , 其中的 内容尺寸 + 内边距 + 边框宽度 最终得到的才是盒子模型的宽度 ;

二、代码示例

1、盒子模型扩展尺寸示例

分析下面的代码 , 盒子模型 的尺寸如下 :

• 内容尺寸 : 200 x 200 像素 ;
• 内边距 : 上内边距 20px , 右内边距 10px , 下内边距 30px , 左内边距 50px ;
• 边框宽度 : 10 像素 ;

盒子模型的宽度 = 内容宽度 200px + 右内边距 10px + 左内边距 50px + 边框宽度 10px * 2 = 280px ;

盒子模型的高度 = 内容高度 200px + 上内边距 20px + 下内边距 30px + 边框宽度 10px * 2 = 270px ;

代码示例 :

 

     

盒子模型内部尺寸计算

展示效果 :

使用标尺工具分别测量 盒子模型 的 宽度和高度 :

• 测量宽度 : 宽度 280 像素 ;
  

• 测量高度 : 270 像素 ;

2、盒子模型固定尺寸示例

如果要将盒子模型设置为 200 x 200 像素 , 保持原来的边距不变 , 那么只能修改内容尺寸 ;

分析下面的代码 , 盒子模型 的尺寸如下 :

• 内容尺寸 : 未知 ;
• 内边距 : 上内边距 20px , 右内边距 10px , 下内边距 30px , 左内边距 50px ;
• 边框宽度 : 10 像素 ;
• 总体盒子模型尺寸 : 200 x 200 像素 ;

盒子模型的宽度 = 内容宽度 x + 右内边距 10px + 左内边距 50px + 边框宽度 10px * 2 = 200px ;

计算出内容宽度 = 200 - 80 = 120 ;

盒子模型的高度 = 内容高度 x + 上内边距 20px + 下内边距 30px + 边框宽度 10px * 2 = 200px ;

计算出内容高度 = 200 - 70 = 130 ;

最终得到内容的尺寸为 120 x 130 像素 ;

代码示例 :

 

     

盒子模型内部尺寸计算

展示效果 :

测量盒子模型宽度 200 像素 ;

测量黑盒子模型高度 200 像素 ;