CSS盒模型

盒模型

由双十一剁手节的快递盒引发地对CSS盒模型的思考。把盒模型中的属性比作快递盒。

盒模型	快递盒
content	快递盒中装的物品
padding	为了防摔将物品包上的防震材料，增加盒子的内边距。改变物品与盒子之间的距离
border	盒子边框，可以设置盒子材料，厚度，颜色。好比设置border: 1px solid #00A5FF;
margin	盒子外边距。改变盒子与盒子之间的距离。

当盒模型与快递盒类比，是不是就好理解多了呢？

盒模型种类

标准盒子模型

box-sizing：content-box（默认）
width=内容宽度
盒子总宽度 = width + border + padding

IE盒子模型

box-sizing：border-box
width=内容宽度+padding+border
盒子总宽度 = width

BFC

什么是BFC

块级格式化上下文

作用

形成一个完整的独立的空间，让空间中的子元素不影响外部布局。用于清除浮动，防止margin重叠

触发规则

float不为none
position不为relative static
dispaly:tabel-cell | inline-block
overflow:auto | scroll | hidden

BFC使用场景

解决因浮动元素让父元素高度坍塌问题

父元素添加
overflow：hidden

两栏自适应布局

 body {
           width: 300px;
           position: relative;
       }

       .aside {
           width: 100px;
           height: 150px;
           float: left;
           background: #f66;
       }

       .main {
           height: 200px;
           background: #fcc;
           overflow: hidden;
       }
       
<body>
<div class="aside"></div>
<div class="main"></div>
</body>

这时左侧已经浮动起来，应该

.main {
           overflow: hidden;
       }

让右侧自适应宽度。

外边距垂直方向重合

兄弟元素垂直之间的margin是取两个元素margin的最大值，而不是取和。

 #p{
          width: 100px;
            height: 100px;
            background: pink;
            margin-bottom: 10px;
    }
 #c{
           width: 100px;
           height: 100px;
           background: deeppink;
           margin-top: 20px;
     }
       
       
 <body>
    <div id="p">
    </div>
    <div id="c">
    </div>
</body>

为了让两个div的margin不受影响，可以在下面的那个div中包裹一层父元素，触发BFC。

 #f{
            overflow: hidden;
}
        
<div id="p">
</div>
<div id="f">
    <div id="c">
    </div>
</div>

参考：juejin.cn/post/684490…

轻松理解CSS盒模型与BFC