阐述一下盒子模型以及它有什么特殊的应用,BFC是什么?
这是一道大厂百分百会考的题目,毕竟css的知识点多而杂,就盒子模型比较系统一点,适合当考题。
盒子模型
- 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。
- CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
- 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
Box Model 是 CSS 布局的对象和基本单位,页面就是由这一个个盒子所构成的。
属性与特点
- 盒子实际宽度(高度) = 内容(content)+ 边框(border)+ 间隙(padding)+ 间隔(margin)。
- 外边距(margin)折叠:在常规流布局时,盒子都是垂直排列(在未改变div的属性前都是占一行的),两者之间的间距由各自的外边距所决定(一般取最大),但不是二者外边距之和。
- 浏览器的兼容性问题: 根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。 (同时IE8 及更早IE版本不支持设置填充的宽度和边框的宽度属性。解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可。)
根据上面的提到的属性跟特点,我们会引发两个问题: 1. 当我们为盒子设置width的时候(排除IE),实际上盒子的大小并不是你预想设置的那样,因为还要加上margin,padding,border,这样我们设计宽度的时候就有些麻烦了。 2. 当两个盒子的都设定了 margin:10px; 就会出现下面的情况,两个盒子中间只有 10px 而不是 20px 。
我们先看第一个问题,为了方便我们设计盒子的宽度 W3C 为了我们提供了: box-sizing 的属性。
也就是说当我们设置盒子样式为:box-sizing: border-box
时就可以解决这一问题,细心的你不知道有没有发现,这里还是没有把外边距(margin)包含在里面,这里是有两点原因: 1. margin在W3C定义为透明的背景边框; 2. 它不适合做其他调整,不符合其身份定义;
对于第二问题,这就要引入大名鼎鼎的BFC了。
BFC
浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为“visiable”的块级盒子,都会为他们的内容创建新的 BFC,块级格式化上下文 (Block Fromatting Context)。 BFC是一个独立的布局环境,其中的元素布局是不受外界的影响,并且在一个BFC中,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直的沿着其父元素的边框排列。
根据自身的需要确定如何创建BFC环境,那我们试着解决第二个问题。
// 产生外边距折叠的dom结构
<div class="container">
<p>Sibling 1</p>
<p>Sibling 2</p>
</div>
// 产生外边距折叠的css
.container {
background-color: red;
}
p {
background-color: lightgreen;
margin: 10px 0;
}
只要我们为 Sibling 2 创建BFC就可以解决这个问题了,下面上代码
<div class="container">
<p>Sibling 1</p>
<div class="newBFC">
<p>Sibling 2</p>
</div>
</div>
.container {
background-color: red;
}
p {
margin: 10px 0;
background-color: lightgreen;
}
.newBFC {
overflow: hidden;
}
拓展
BFC 除了解决外边距折叠外还有什么作用呢?相信大家都遇到过这样的情况,当父元素没有设置高度,里面的子元素为绝对定位即脱离文档流时,父元素将不会被撑开。
<div class="container">
<div>Sibling</div>
<div>Sibling</div>
</div>
.container {
/* 放开下面代码后,形成BFC解决问题 */
/* overflow: hidden; */
background-color: green;
}
.container div {
float: left;
background-color: lightgreen;
margin: 10px;
}
以上就为盒子模型的全部,感谢这篇博客的资料提供《什么是BFC》。
关注文集以便查看更多前端面试知识。
前端面试总结zhuanlan.zhihu.com