文章目录
- 一、盒子模型内部尺寸计算
- 1、设置内边距和边框对盒子模型的影响
- 2、盒子模型尺寸计算
- 二、代码示例
- 1、盒子模型扩展尺寸示例
- 2、盒子模型固定尺寸示例
一、盒子模型内部尺寸计算
1、设置内边距和边框对盒子模型的影响
内容尺寸 大小是 固定的 , 设置的 width 和 height 是多少 , 内容尺寸就是多少 ;
如 : 下面的 CSS 样式中 , 设置 div 尺寸为 200 x 200 像素 , 那么内容尺寸就是该大小 ;
div {
width: 200px;
height: 200px;
}如果在 内容尺寸 的基础上 , 添加了 四个方向的内边距 , 则整个 盒子模型 会向四周 扩大 内边距 大小
- 向上扩张了 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 ;
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>盒子模型内部尺寸计算</title>
<base target="_blank"/>
<style type="text/css">
div {
width: 200px;
height: 200px;
/* 设置边框 */
border: 10px solid blue;
/* 设置 上内边距 20px , 右内边距 10px ,
下内边距 30px , 左内边距 50px */
padding: 20px 10px 30px 50px;
}
</style>
</head>
<body>
<div>盒子模型内部尺寸计算</div>
</body>
</html>展示效果 :
使用标尺工具分别测量 盒子模型 的 宽度和高度 :
- 测量宽度 : 宽度 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 像素 ;
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>盒子模型内部尺寸计算</title>
<base target="_blank"/>
<style type="text/css">
div {
width: 120px;
height: 130px;
/* 设置边框 */
border: 10px solid blue;
/* 设置 上内边距 20px , 右内边距 10px ,
下内边距 30px , 左内边距 50px */
padding: 20px 10px 30px 50px;
}
</style>
</head>
<body>
<div>盒子模型内部尺寸计算</div>
</body>
</html>展示效果 :
测量盒子模型宽度 200 像素 ;
测量黑盒子模型高度 200 像素 ;
