css盒子模型
在css处理网页的时候，会认为每个元素都包含在一个不可见的盒子里面，那么我们对网页布局就相当于是摆放盒子。
1、盒子模型的组成
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
如图所示：
咱们先看下面这段代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的盒子</title>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
</style>
</head>
<body>
<h2>盒子模型演示</h2>
<div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 绿色边框。</div>
</body>
</html>
效果如下：
因为我们在css中已经固定了内容区宽度为300px，内边距为25px，边框为25px，外边距为25px，故整个盒子的宽度为：300+25×2+25×2+25×2=450px。
故得出：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
所以可以根据已知条件求出其他未知的长宽。
接下来我们看一下这几部分组成的使用和注意事项。
1、内容区（content）
没有为元素设置内边距和边框，则内容区大小默认和盒子大小是一致的。通过width和height两个属性可以设置内容区的大小。
width和height属性只适用于块元素。
2、内边距（padding）
内边距指的就是元素内容区与边框以内的空间。默认情况下width和height不包含padding的大小。使用padding属性来设置元素的内边距。
例如：
-
padding:10px 20px 30px 40px
– 设置元素的上、右、下、左四个方向的内边距。 -
padding:10px 20px 30px;
– 分别指定上、左右、下四个方向的内边距 -
padding:10px 20px;
– 分别指定上下、左右四个方向的内边距 • padding:10px;
同时在css中还提供了padding-top、padding-right、padding-right、padding-bottom分别用来指定四个方向的内边距，如图：
3、边框（border）
可以在元素周围创建边框，边框是元素可见框的最外部。
可以使用border属性来设置盒子的边框如：
– border:1px red solid;
– 上边的样式分别指定了边框的宽度、颜色和样式。
也可以使用border-top/left/right/bottom分别指定上右下左四个方向的边框。和padding一样，默认width和height并包括边框的宽度。
边框的样式：
- none（没有边框）
- dotted（点线）
- dashed（虚线）
- solid（实线）
- double（双线）
- groove（槽线）
- ridge（脊线）
- inset（凹边）
- outset（凸边）
4、外边距（margin）
外边距是元素边框与周围元素相距的空间，没有背景颜色，是完全透明的。用法和padding类似，同样也提供了四个方向：margin-top/right/bottom/left。
当将左右外边距设置为auto时，浏览器会将左右外边距设置为相等，所以这行代码margin:0 auto可
以使元素居中。
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
