前端盒模型全面解析
本文围绕前端盒模型展开，介绍了其概念，包括标准盒模型和怪异盒子（IE盒子）的结构、大小计算方式。还阐述了边框、内边距、外边距的设置及注意事项，如上下外边距重叠、margin - top传递性问题及解决办法，最后给出扩展知识和面试题。
盒模型
什么是盒模型？
网页是由很多模块构成，这些模块可以看成是一个个盒子，每个模块里还分为几部分，每部分都可以看成一个小盒子，而我们把这些大大小小的盒子就叫做盒模型。
标准盒模型的结构
-
content：代表内容区域，指存放内容的空间
-
padding：内边距，盒子内部的空间，其实就是内容到边框的距离，相当于生活中快递中的泡沫
-
border：盒子的边框，四条边框可以设置样式
-
margin：外边距，盒子与盒子之间的间距（兄弟关系，父子关系）
标准盒子大小的计算
在布局的时候，我们一定会认真计算盒子的大小，不然会影响的布局
标准盒子真正的大小：
width=content+padding*2(代表左右两边)+border * 2(左右两边的border)
height=content+padding *2 +border * 2 （2代表上下的padding或border）
标准盒子所占空间的大小：
width=content+padding*2(代表左右两边)+border * 2(左右两边的border) +margin *2
height=content+padding *2 +border * 2 +margin *2
注意：在标准盒子中，css样式中的width和height并不是盒子真正的大小，只是盒子中content（内容区域）的大小
怪异盒子（IE盒子）
怪异盒子width宽度和height高度是包含content+pading+border，一般常用于移动端布局
-
box-sizing：设置盒子类型
-
border-box：怪异盒子
-
content-box：标准盒子
-
怪异盒子的大小：其实就是width的大小，包含了content+padding+border
怪异盒子所占空间的大小：width(包含了content+padding+border)+margin*2
-
宽度=width+margin*2
-
高度=height+margin *2
边框border
-
设置盒子的边框的样式，包括宽度（边框的粗细）、类型、颜色。
语法：
边框的三要素 border-方位-width：宽度；（边框线条粗细） border-方位-style：solid | dashed | dotted |double; border-方位-color：颜色值； 复合属性： 控制一条边框的复合属性 border-方位：宽度 类型 颜色值； 控制四条边 border：宽度 类型 颜色；
-
solid：实线
-
dashed：虚线
-
dotted：点线
-
double：双边线
-
-
注意：
-
如果颜色默认不写，显示黑色，浏览器渲染
-
至少需要写两个值：宽度和类型
-
两条边框相接区域斜均分（按照对角线的区域均分）
-
可以绘制一个三角形
-
四条边框，设置宽高都为0
-
其中三条边颜色透明 transparent
-
transparent：颜色透明，可以用于文字颜色透明、边框透明、input背景设置透明
-
-
-
练习：
内边距padding
-
盒子边框和内容之间的距离
-
语法：
padding-left padding-top padding-right padding-bottom 复合属性： padding 1. 设置四个值：上 右 下 左 （顺时针方向） 2. 设置三个值：上 左右 下 3.设置两个值：上下 左右 4. 设置一个值：上下左右四个方向
-
注意：
-
padding设置了之后可以将盒子撑大（怪异盒子除外）
-
padding区域有背景颜色
-
-
应用场景
-
处理内容距离边框的距离，留白，调整盒子内容的显示位置
-
用于导航模块的内容四周留白，可以根据内容多少控制大小
-
外边距margin
盒子和盒子之间的距离
使用方式和padding一样
-
盒子和盒子之间兄弟关系
-
盒子和盒子之间是父子关系
盒模型注意事项：
上下外边距会存在重叠
盒子和盒子之间是兄弟关系，margin重叠只出现在垂直方向上，以值大的为准。
解决方案：将相邻的两个盒子中的一个盒子放在一个新的BFC区域里，(设置overflow:hidden)就可以解决margin重叠的问题。
<style>
body{
margin: 0;
}
.box1{
width: 200px;
height: 200px;
background-color: tomato;
margin-top: 20px;
margin-bottom: 80px;
margin-right: 30px;
/* 设置浮动可以让盒子同行显示 */
/* float: left; */
}
.box2{
width: 200px;
height: 200px;
background-color: pink;
/* margin-top和margin-bottom重叠性 也叫外边距重叠*/
/* 盒子和盒子之间兄弟关系，margin会在垂直方向上发生重叠，以值大为准 */
/* 水平方向不会发生重叠 */
margin-top: 50px;
margin-left: 50px;
/* 设置浮动 */
/* float: left; */
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
margin-top传递性（盒子和盒子之间是父与子关系）
盒子和盒子之间是父子关系，整个margin的属性只有margin-top会有传递性，子元素找不到父元素的边界（参考位置），将这个margin-top属性会传递给父元素
解决方案：
-
父元素设置border，会改变父元素盒子的大小， border：1px solid transparent;（不推荐）
-
父元素设置padding，也会改变父元素盒子的大小，padding可以作为margin-top的参考（不推荐）
-
父元素设置
overflow:hidden，产生BFC容器，这个容器内所有内容有自己的排列规范，不会影响盒子外面的元素`
<style>
body{
margin: 0;
}
.box1{
width: 400px;
height: 400px;
background-color: tomato;
/* margin-top: 50px; */
/* margin-top解决方案 */
/* border: 1px solid transparent; */
/* padding: 1px; */
/* 超出部分隐藏 */
/* 设置overflow：hidden：产生一个BFC容器，这个容器内所有内容的排列不会影响盒子外面的排列 */
/*overflow: hidden;*/
}
.box2{
width: 200px;
height: 200px;
background-color: pink;
/* margin-top传递性：盒子和盒子之间是父子关系，只有margin-top有传递性 */
/* 子盒子找不到父盒子的边界(参考位置)时，就会发生传递性 */
margin-top: 50px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
扩展知识
子元素盒子width默认不设置和设置100%的区别：
-
默认不设置，auto自适应，在父元素区域里面自适应，盒子大小计算方式为：
-
子盒子的大小=内容区域+padding * 2+border * 2
-
子盒子所占空间的大小=大盒子的宽度
-
-
100%是参考父元素的宽度，折算下来内容区域是固定值，盒子大小计算方式为：
-
子盒子的真正大小=父盒子的width值为大小+子盒子padding *2+border *2；
-
子盒子所占空间的大小：子盒子的真正大小+margin
-
面试题：
-
盒子的大小如何计算
-
怪异盒子（IE盒子）和标准盒子的区别
-
使用margin-top传递问题以及处理方案
-
padding和margin分别用在哪些场景，用自己代码解释
-
扫一扫
4137
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
