209081的gravatar头像
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的原理

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

 b.怎么取创建bfc

  1. float属性不为none(脱离文档流)
  2. position为absolute或fixed
  3. display为inline-block,table-cell,table-caption,flex,inine-flex
  4. overflow不为visible
  5. 根元素

c.应用场景

  1. 自适应两栏布局(左浮动,右边元素开启bfc)
  2. 清除内部浮动 (父元素开启bfc)
  3. 防止垂直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>

 


打赏
最近浏览
209081  LV3 2019年3月25日
最代码官方  LV167 2019年3月9日
顶部 客服 微信二维码 底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友