问题

如何获取元素的布局信息？

margin设置负值会怎么样？margin重叠问题？

什么是BFC？如何理解？

手动实现clearfix

通过flex实现骰子模型

解答

如何获取元素的布局信息？

• offsetWidht : 获取一个元素的布局宽度
• offsetWidth = 元素的边框 + 元素的内边距 + 内容宽度
• offsetHeight : 获取一个元素的布局高度
• offsetHeight = 元素的边框 + 元素的内边距 + 内容高度
• offsetParent : 获取一个元素的最近的经过定位的父级元素
• offsetLeft : 获取一个元素相对应该元素offsetParent的左内边框之前的距离
• offsetTop : 获取一个元素相对应该元素offsetParent的顶部边框之间的距离

margin设置负值会怎么样？margin重叠问题？

margin设置负值后会有什么效果？

1. margin-right:自身位置不变,右侧元素向左拖拽
2. margin-left:自身向左拖拽
3. margin-top:自身向上拖拽
4. margin-bottom:自身位置不变,底部元素向上拖拽

margin重叠问题

外边距重叠只会出现在块级元素(div,p ),什么情况下会出现margin重叠？

1. 父元素不是BFC

2. 父元素没有border-top/padding-top

3. 相邻元素没有没有inline元素分割

什么是BFC？如何理解？

BFC与形成条件

BFC : Block Format Context 块级格式上下文
当元素 float不是none,overflow不是visible,position是fixed/absolute,display是flex/inlne-block等时均为形成BFC的条件

BFC适用场景

使用BFC后元素内部内容将不会再影响外部元素布局效果。

1. 清除浮动

.bfc {
    overflow:hidden;
}

2. 避免外边距重叠

    <style>
        .content {
            border: 1px solid #999;
            margin-top: 10px;
            margin-bottom: 20px;
            padding: 10px;
        }
    </style>
    <div class="content">
        内容1
    </div>
    <div class="content">
        内容2
    </div>

为内容1外层加入bfc后

    <style>
        .bfc {
            overflow: hidden;
        }
        .content {
            border: 1px solid #999;
            margin-top: 10px;
            margin-bottom: 20px;
            padding: 10px;
        }
    </style>
    <div class="bfc">
        <div class="content">
            内容1
        </div>
    </div>
    <div class="content">
        内容2
    </div>

手动实现clearfix

   .clearfix:after {
     content: '';
     display: block;
     clear: both;
   }

通过flex实现骰子模型

    <style>
        .box{
            display: inline-flex;
            flex-direction: column;
            padding: 30px;
            border-radius: 5px;
            border: 2px solid #999;
        }
        .box-item{
            width: 120px;
            display: flex;
        }
        .box-item:nth-child(2){
            justify-content: center;
        }
        .box-item:nth-child(3){
            justify-content: flex-end;
        }
        .circle{
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #999;
        }
    </style>
    <div class="box">
        <div class="box-item">
            <div class="circle"></div>
        </div>
        <div class="box-item">
            <div class="circle"></div>
        </div>
        <div class="box-item">
            <div class="circle"></div>
        </div>
    </div>