CCS 盒模型分析

时间 2019-11-10

标签 ccs 模型分析繁體版

原文原文链接

基本概念

页面中的每一个元素均可以当作一个盒子，盒子里面能够装其余盒子，层层嵌套。html 标签就是最外面的大盒子。每一个盒子由内向外分别是 content, padding, border, margin 。css

外边距折叠问题

相邻元素在竖直方向上的外边距在相遇时会发生合并，合并后的外边距的高度等于两个外边距中较大的那个值。

兄弟元素间

父子元素间

外边距折叠解决方案（BFC）

Block Formatting Context （块级格式化上下文）

BFC 能够简单地理解为某个元素的一个 CSS 属性，只不过这个属性不能被开发者显式的修改，拥有这个属性的元素对内部元素和外部元素会表现出一些特性，这就是BFC。dom

怎样让元素建立 BFC

float 的值不为 none （浮动元素）
overflow 的值不为 visible
display 的值为 inline-block 、table-caption 、 table-cell 、flex 、inline-flex
positon 的值为 absolute 或 fixed
<html>(根元素)

BFC 的布局规则

内部的 box 会在垂直方向上一个接一个地放置（平时说的块级元素一行行放）
box 间垂直方向的距离由 margin 决定。同一个BFC中的两个相邻的 box 仍是会产生外边距重叠问题
BFC 的区域不会与浮动的 box 重叠
BFC 是一个独立的容器，里面的元素不会影响外面的元素，反之亦然。
包含浮动元素，计算 BFC 的高度时，浮动的元素也会参与计算

BFC 的应用场景

分属于不一样 BFC 的元素能够防止垂直外边距折叠
清除内部浮动（使浮动元素能够撑起父盒子）
自适应两栏布局（BFC 区域不会与浮动元素重叠）
防止元素被浮动元素覆盖

float + BFC 两栏布局:布局

<div class="parent">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

<style>
    .left {
        float: left;
        width: 100px;
        background-color: blue;
    }
    .right {
        overflow: hidden; // 触发 BFC
        background-color: green;
    }
</style>

阅读原文
<br/>
参考文章：
关于CSS-BFC深刻理解
 css 盒子模型理解post