css盒模型与BFC-博客-最代码

209081 2019-03-03 14:03:19

css盒模型与BFC

1.盒模型的两种分类

标准模型：盒模型的宽高只是内容（content）的宽高

IE模型：盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高。

我们可以用CSS3 的属性 box-sizing来选择使用哪种模型：

/* 标准模型 */
box-sizing:content-box;

 /*IE模型*/
box-sizing:border-box;

2.边距重叠问题

如果两个盒子，上面的一个margin-bottom为20px，下面的一个margin-top为40px，那么他们会合并在一起，距离只有40px

3.边距重叠解决方案(BFC)

BFC，其全英文拼写为 Block Formatting Context 直译为“块级格式化上下文”，其中 Formatting Context 是一个决定如何渲染文档的容器

a.BFC的原理

内部的box会在垂直方向，一个接一个的放置
每个元素的margin box的左边，与包含块border box的左边相接触（对于从做往右的格式化，否则相反）
box垂直方向的距离由margin决定，属于同一个bfc的两个相邻box的margin会发生重叠
bfc的区域不会与浮动区域的box重叠
bfc是一个页面上的独立的容器，外面的元素不会影响bfc里的元素，反过来，里面的也不会影响外面的
计算bfc高度的时候，浮动元素也会参与计算

b.怎么取创建bfc

float属性不为none（脱离文档流）
position为absolute或fixed
display为inline-block,table-cell,table-caption,flex,inine-flex
overflow不为visible
根元素

c.应用场景

自适应两栏布局（左浮动，右边元素开启bfc）
清除内部浮动（父元素开启bfc）
防止垂直margin重叠

eg:利用bfc解决边框重叠问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .top{
            background: #0ff;
            height:50px;
            margin-bottom:20px;
        }
        .bottom{
            height:50px;
            margin-top:40px;
            background: #ddd;
        }
    </style>
</head>
<body>

    <section class="top">
        margin-bottom:20px;
    </section>

    <div style="overflow:hidden">
        <section class="bottom">
            margin-top:40px;
        </section>
    </div>

</body>
</html>

打赏

0个评论