注意：曾全职考公，空窗期一年，沉淀学习，重返赛道。
注意：有理解错、说错的地方，请各路大佬留言讨论，我好改进，感谢！！！

目录

1. 盒模型
2. margin
   1. margin 纵向重叠
   2. margin 负值
   3. margin 百分比
3. BFC

盒模型

1. box-sizing

    box-sizing: content-box; // 默认值
    box-sizing: border-box; // 将 border 和 padding 包含在 width 和 height 中

2. 计算宽度

    // offsetWidth = 内容宽度 + 内边距 + 边框（外边距不计算）
    // 注意有 padding-left、padding-right、border-left-width、border-right-width
    var div = document.getELementId('myDiv');
    console.log(div.offsetWidth);

margin

margin 纵向重叠

1. 相邻兄弟元素：上下的外边距会重叠，取相邻元素的 margin 值之间的最大值

    <style>  
        .box1 {  
            margin-bottom: 20px;  
        }  
        .box2 {  
            margin-top: 30px;  
        }  
    </style>
    
    /* 它们之间的实际间距是 30px，即两者中较大的那个值 */
    <div class="box1">Box 1</div>  
    <div class="box2">Box 2</div>  

2. 父元素与第一个/最后一个子元素：父元素与其第一个或最后一个子元素之间的外边距也可能会重叠。这通常发生在没有边框、内边距或清除（clearance）分隔它们的情况下。
3. 空的块级元素：如果一个块级元素不包含边框、内边距、行内内容、高度或清除（即它是“空的”），则它的上边距和下边距可能会与其相邻元素的外边距重叠。如果有多个空的块级元素，空内容的元素的外边距会被忽略（重叠了）。

    <style>  
        p {  
            margin-top: 10px;
            margin-bottom: 15px;
        }  
    </style>
    
    /* AAA 和 BBB 之间的边距是 15px */
    <p>AAA</p>
    <p></p>
    <p></p>
    <p></p>
    <p>BBB</p>

margin 负值

1. top 和 left：往上、向左移动

    margin-top: -10px; /* 该元素往上移动 10px */
    margin-left: -10px; /* 该元素向左移动 10px */

2. right：右侧元素左移，自身不受影响

    /* 相当于元素的宽度被缩小，右侧元素左移 */
    /* 若负值等于元素宽度，而右侧又无元素，该元素会向上行移动，下面的元素会顶上去 */
    /* 实现圣杯布局的原理 */
    margin-right: -10px; /* 右侧元素左移 10px */

3. bottom：下方元素上移，自身不受影响

    margin-bottom: -10px; /* 下方元素上移 10px */

margin 百分比

    <style>  
        .container {  
            width: 100%; /* 父容器宽度为视口宽度 */  
            padding: 10px; /* 添加一些内边距 */  
        }  

        .child {  
            width: 50%; /* 子元素宽度为父容器宽度的 50% */  
            margin-left: 25%; /* 左边距为父容器宽度的 25%，从而水平居中 */  
        }
    </style>
    
    /* margin 外边距的值为父元素的宽度的百分比 */  
    <div class="container">  
        <div class="child">我是子元素</div>  
    </div>

BFC

1. Block format context：块级格式化上下文
2. 独立渲染区域，内部元素的渲染不会影响边界以外的元素
3. 形成条件
   1. float 不是 none
   2. absolute、fixed、inline-block
   3. overflow 不是 visible
4. 常见应用
   1. 防止外边距（margin）重叠（塌陷）
   2. 清除内部浮动：当子元素浮动后，父元素的高度可能会塌陷，即父元素的高度不会被子元素撑开。通过将父元素设置为BFC，可以确保浮动元素在计算父元素高度时被包含在内，从而解决高度塌陷的问题。
   3. 自适应多栏布局：BFC的区域不会与浮动元素重叠，这一特性可以用于实现自适应多栏布局。通过为需要避免与浮动元素重叠的元素创建BFC，可以确保这些元素在布局时不会与浮动元素发生重叠。
   4. 隔离效果：BFC作为一个独立的渲染区域，其内部的元素布局不会影响到外部的元素。这种隔离效果可以用于解决一些复杂的布局问题，如避免不同部分之间的布局干扰。