html盒⼦模型代码_CSS盒模型
1.什么是css模型？
css的盒模型由⾥到外包括：content,padding,border,margin4部分，如图所⽰。
css的盒模型有两种：IE盒模型和标准盒模型
IE盒模型和标准盒模型。
2.两种盒模型的区别
W3C标准盒⼦模型(content-box)：内容就是盒⼦的边界。
W3C标准盒⼦模型(content-box)： width=内容宽度
IE盒⼦模型(border-box)：边框才是盒⼦的边界。
IE盒⼦模型(border-box)： width=内容宽度+padding+border
3.如何设置两种盒模型
在不设置box-sizing的情况下，box-sizing默认是content-box。
/* 标准模型 */
box-sizing:content-box;
/*IE模型*/
box-sizing:border-box;
4.margin合并
margin合并：如果两个box都设置了外边距，那么在垂直⽅向上，两个box的外边距会发⽣重叠，以绝对值⼤的那个为最终结果显⽰在页⾯上。
哪些情况会发⽣margin合并
⽗⼦margin合并
如果⼦元素设置了外边距，在没有把⽗元素变成BFC的情况下，⽗元素也会产⽣外边距，给⽗元素添加 overflow：hidden 这样⽗元素就变为 BFC，不会随⼦元素产⽣外边距，但是⽗元素的⾼会变化。
兄弟margin合并
同级（兄弟）元素在垂直⽅向上外边距会出现重叠情况，最后外边距的⼤⼩取两者绝对值⼤的那个
注意：⾏内元素没有margin-top或margin-bottom，也就是说，在⾏内元素上设置margin-top或margin-bottom是不起作⽤的。
注意：
5.BFC
BFC(Fomatting Context)是块级格式化上下⽂的意思。它是 CSS 2.1 规范中的⼀个概念，它决定了元素如何对其内容进⾏定位，以及与其他元素的关系和相互作⽤。
触发BFC的条件
浮动元素(float除了node以外的值)
定位元素(position: absolute/ fixed)
display(值为inline-block/ table-cell/- table-caption/ flex/ inline-flex)
overflow(值为hidden/atuo/srcoll)设置有这些属性的box，都会产⽣BFC
BFC特性
内部的盒⼦在垂直⽅向上⼀个接⼀个地放置
垂直⽅向上地距离由margin决定，在同⼀个BFC的box中，相邻的两个box边距会重叠
BFC的区域不会与float box重叠
计算BFC的⾼度时，浮动元素也参与计算
BFC就是⼀个独⽴的容器，⾥⾯的⼦元素不受外⾯的元素影响
BFC的作⽤
1.解决margin重叠问题（添加独⽴BFC）
看下⾯例⼦
未设置BFC之前
CSS代码
.child{
width: 100px;
height: 100px;
background-color: orange;
margin: 30px;
}
html代码
<div class="child"></div>
<div class="child"></div>
设置BFC后
CSS代码
.child{
width: 100px;
html里的float是什么意思height: 100px;
background-color: orange;
margin: 30px;
}
.bfc{
overflow: hidden;
}
html代码
<div class="child"></div>
<div class="bfc">
<div class="child"></div>
</div>
设置BFC后，第⼀个child的margin-bottom不会和第⼆个child的margin-top重叠，这也是BFC元素的另⼀个原则，不会影响到外边的box，是⼀个独⽴的区域。
效果图对⽐
2.解决浮动⾼度塌陷问题（在⽗元素添加overflow：hidden）
当我们不给⽗元素设置⾼度，⼦元素设置了浮动的时候，会发⽣⾼度塌陷，代码和效果图如下。效果图：
CSS代码
.father {
border: 5px solid rgb(91, 243, 30);
width: 460px;
}
.child{
width: 200px;
height: 200px;
border:5px solid orange;
float: left;
}
html代码
<div class="father">
<div class="child"></div>
<div class="child"></div>
</div>
当我们在⽗元素的样式中加⼊overflow：hidden，就能解决float⾼度塌陷问题。
CSS代码
.father {
border: 5px solid rgb(91, 243, 30);
width: 460px;
overflow: hidden;
}
.child{
width: 200px;
height: 200px;
border:5px solid orange;
float: left;
}
html代码
<div class="father">
<div class="child"></div>
<div class="child"></div>
</div>
效果图就会发⽣变化
以上便是对CSS盒模型的理解，如有不对的地⽅，请指出。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。