CSS

CSS盒模型与BFC

Posted on 2018-11-30,5 min read

CSS中最重要的就是盒模型,它是CSS的基石。在面试中有很高的几率被问到:请你谈谈你对盒模型的理解。题目的字数不多,但是要回答的更好,更加全面却不是很容易。所以在这里记录一下比较好的回答。

问题都是由浅入深的

  • 盒模型的概念:标准模型和IE模型
  • 标准模型和IE模型的区别
  • CSS如何设置这两种模型
  • JS如何设置获取盒模型对应的宽度和高度
  • 根据盒模型解释边距重叠
  • 边距重叠解决方案

1. 盒模型的基本概念

盒模型包括 标准模型 + IE模型

1.1 标准模型

标准盒子模型

在标准盒子模型中,盒子的宽度等于content内容的宽度;

​ 盒子的高度等于content内容的高度。

1.2 IE模型

IE模型

在IE模型中,盒子的宽度等于 content + padding + border的宽度总和;

​ 盒子的高度等于content + padding + border的高度总和。

2. 标准模型和IE模型之间的区别

两者的区别就是上面写的对于宽度和高度计算的方式不同。

3. CSS如何设置这两种模型

使用属性box-sizing

3.1 设置标准模型

盒模型默认就是标准模型。box-sizing:content-box设置为标准模型。

<style>
    div {
        width: 300px;
        height: 300px;
        border: 5px solid #ccc;
        padding: 10px;
        margin: 50px;
        /* box-sizing: content-box */
    }
</style>
<body>
    <div>标准模型</div>
</body>
标准模型图

从这幅图中就可以看出,在标准模型下,盒子的宽高就等于内容的宽高。

3.2 设置IE模型

box-sizing: border-box设置为IE模型

<style>
    div {
        width: 300px;
        height: 300px;
        border: 5px solid #ccc;
        padding: 10px;
        margin: 50px;
        /* border-box表示盒模型是IE模型 */
        box-sizing: border-box;
    }
</style>
<body>
    <div>IE模型</div>
</body>
FmQiJU.png

IE模型下,盒子的宽高 = content宽高 + padding宽高 + border宽高;

与margin没有关系。

4. JS如何获取盒模型对应的宽和高

4.1 方式一

dom.style.width/height

这种方式只能取到dom元素内联样式所设置的宽高,如果样式是在style标签中或者外联的CSS文件中的话是获取不到宽高的。

4.2 方式二

dom.currentStyle.width/height

这种方式获取的是在页面渲染完成后的结果,就是说不管是哪种方式设置的样式,都能获取到。

但这种方式只有IE浏览器支持。

4.3 方式三

window.getComputedStyle(dom).width/height

这种方式的原理和2是一样的,这个可以兼容更多的浏览器,通用性好一些。

但是不支持IE

4.4 方式四

dom.getBoundingClientRect().width/height

这种方式是根据元素在视窗中的绝对位置来获取宽高的。

这个的返回值没有单位。

4.5 方式五

dom.offsetWidth/offsetHeight

这种方式是最常用的。兼容性也很好。

5. 根据盒模型解释边距重叠

下图第一个div设置了下边距为50px,第二个div设置了上边距为100px。按道理来说中间的距离应该为150px。但是只有100px。这就是边距重叠。它只会取较大值最为边距。

FmlfHI.png
<style>
    .one {
        background: skyblue;
        width: 400px;
        height: 100px;
        margin-bottom: 50px;
    }

    .two {
        background: gray;
        width: 400px;
        height: 100px;
        margin-top: 100px;
    }
</style>
</head>
<div class="one">设置了margin-bottom: 50px</div>
<div class="two">设置了margin-top: 100px</div>
</body>

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

什么是BFC呢?其英文的全拼是Block formatting Context,直译就是”格式化块级上下文“。

6.1 BFC的原理(布局规则)

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

6.2 创建BFC的方法

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

6.3 BFC的使用场景

  1. 清除浮动
  2. 防止垂直方向的margin重叠

下一篇: CSS中清除浮动的方式