10.1 示例题目

看一个经典的校招笔试题。

.box {
    width: 160px;
    height: 160px;
    padding: 10px 20px 30px;
    padding-right: 40px;
    border: 1px solid red;
    border-top: none;
}

请问，这个盒子实际的宽、高是多少？

解答：这是个非常好的题目。首先，根据 padding: 10px 20px 30px; 可以初步得知，它的上、右、下、左的padding分别为10、20、30、20。注意，这里是3个数值，没有表示“左”的数字，所以左和右相同，都是20px。

紧接着，写了一句 padding-right: 40px; 这意味着，它“层叠”掉了刚刚设置的右padding那个20px。即，现在右padding变为了40px。

于是就会有问，那如果两句话颠倒顺序呢？就是：

padding-right: 40px;
padding: 10px 20px 30px;

那此时右padding是20px啦。就是说，谁写在下面，听谁的。

题目中，border的情况也是类似的，即，上边框是none，其他三个边框都是1px的。

至此，相信你已经可以画出这个盒子的盒模型图了：

因此，这个盒子的总宽度是160+20+40+1+1=222像素；总高度是160+10+30+1=201像素。

此面试题一道题考察了很多知识点。

在后面还有 box-sizing: content-box 属性这一知识点，这个属性可以将padding、border从“外扩”变为“内缩”

11. margin塌陷

竖直方向的margin有塌陷现象：小的margin会塌陷到大的margin中。就是说，margin不叠加，只以大值为准。

来看一张图理解一下：

12. BFC

什么是BFC？

BFC（Box Formatting Context，块级格式化上下文）是独立渲染容器，它内部的元素不影响区域外的其他元素，也不会被区域外的其他元素影响，如同“监狱”一样。页面上，用于布局的盒子必须都是BFC，这样才稳定。

形成BFC的方法：

1、overflow:hidden;

2、脱标了（浮动、绝对定位、固定定位）

3、display的值是inline-block或者flex

BFC的作用：

1、让内部浮动的元素，把自己撑出高

2、实现左固定宽度、右自动撑满的布局

3、阻止margin塌陷

这里，可以依次展开说一下BFC的作用。

1、让内部浮动的元素，把自己撑出高

比如：

<div>
    <p></p>
    <p></p>
    <p></p>
    </div>

p浮动了，那么div就不会被撑起来了。

此时可以给div设置overflow: hidden；根据CSS规定，如果盒子是BFC，那么此时就能被浮动的内部元素撑起来。

2、实现左固定宽度、右自动撑满的布局

<div class="left"></div>
<div class="right"></div>

left盒子浮动，设置固定宽度；right盒子默认会钻到left底下去，但是只要给right盒子设置overflow:hidden; 那么right盒子就是BFC了，根据CSS规定，BFC盒子不会被浮动遮挡。因此，right盒子就不钻到left底下了，而是在它的右侧乖乖的撑满，符合题目要求。

3、阻止margin塌陷

<p>我是一个段落</p>
<div>
    <p>我是一个段落</p>
</div>

默认情况，竖直方向的margin会塌陷，但是如果给p标签添加一个div包裹，并且给div盒子设置overflow: hidden; 那么就不塌陷了。

13. 清除浮动

当父元素内部有浮动元素，并且父元素本身没有设置height值时，需要清除浮动。

也就是说，当父元素设置了height值，则什么事儿也没有，不需要清除浮动。

换句话说，浮动的元素一定要被关在一个“稳定”的大盒子中，否则会乱套。

用代码来说：

<div> → 这个div没有设置height，完了，出事儿了
    <p>浮动了</p>
    <p>浮动了</p>
    <p>浮动了</p>
</div>
<div> → 这个div没有设置height，完了，出事儿了
    <p>浮动了</p>
    <p>浮动了</p>
    <p>浮动了</p>
</div>

看图，明明是两个div中的p，现在连成了一行。

怎么解决？？答：给div加height属性就行了！

人生就是这么完美，但是！！总有面试官爱瞎琢磨：如果不加height，还有什么方法能够让页面不乱套么？？

哎……清除浮动这个话题，就火了起来。我们必须为了面试，而学习这个知识。

说白了，工作时，老老实实加height，就不涉及清除浮动哦~~

13.1 如何清除浮动？

13.1.1 方法1：BFC法

给大盒子添加 overflow: hidden; 大盒子就是BFC了，根据BFC的性质，大盒子此时能被浮动的子盒子撑出高了，从而浮动元素被关在里面了。

<div> → 添加overflow: hidden;
    <p>浮动了</p>
    <p>浮动了</p>
    <p>浮动了</p>
</div>
<div> → 添加overflow: hidden;
    <p>浮动了</p>
    <p>浮动了</p>
<p>浮动了</p>

这种方法在工作中很常用，永远滴神。（当然，最最常用的还是老老实实设置height，就不用清除浮动啦。但是有的工程师，即使设置了 height ，也会用 overflow: hidden 呀，这叫做“稳上加稳”）

13.1.2 方法2：clear:both法

给大盒子添加 clear: both; 属性。clear属性是CSS提供的属性，就表示清除浮动，所以算是“正规军”。添加 clear:both; 的盒子，它的左右两边不会被浮动影响，能够保证布局不乱套。

这种方法能够让页面板式不乱套，能基本解决问题，但是大盒子还是没有高，心里还是膈应，觉得不稳定。

<div> → 添加clear:both;
    <p>浮动了</p>
    <p>浮动了</p>
    <p>浮动了</p>
</div>
<div> → 添加clear:both;
    <p>浮动了</p>
    <p>浮动了</p>
    <p>浮动了</p>
</div>

13.1.3 方法3：clearfix法

clearfix法本质上是在大盒子所有子元素的最后，添加一个清除浮动的元素。用代码来说就是：

<div>
    <p>浮动了</p>
    <p>浮动了</p>
    <p>浮动了</p>
    ★ 这儿添加一个清除浮动的元素
</div>
<div>
    <p>浮动了</p>
    <p>浮动了</p>
    <p>浮动了</p>
    ★ 这儿添加一个清除浮动的元素
</div>

看见代码中的五角星了么？我们的思路就是在每个div所有子元素的最后（注意不是div后，而是它里面原有子元素的最后）添加一个清除浮动的元素。

这个元素可以用“伪元素” 就是“冒号冒号阿福特儿”来添加。哈哈，就是 ::after 。

准备这样的CSS代码:

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

这段CSS代码中，“冒号冒号阿福特儿”就是“伪元素”，可以在携带 clearfix 类名的盒子所有子元素的最后添加一个新元素。这个新元素有 clear:both 属性，并且使用了 display: block 转为了块级元素。

那么 content: '' 是什么鬼？这是伪元素的规定，必须写一个 content 属性，否则伪元素创建不出来。

值得一提的是， clearfix 类名是约定俗成的，表示清理修补……也不知道是哪位大神最先使用这个类名的，但是大家都跟风，沿用至今。

好啦，准备完这个类名，就可以给大盒子添加 clearfix 类名了：

<div class="clearfix">
    <p>浮动了</p>
    <p>浮动了</p>
    <p>浮动了</p>
</div>
<div class="clearfix">
    <p>浮动了</p>
    <p>浮动了</p>
    <p>浮动了</p>
</div>

浮动乱套的事儿就被解决了，并且div也被撑出高啦。

这种方法在工作中很常用！（当然，最最常用的还是老老实实设置height，就不用清除浮动啦。但是有的工程师，即使设置了height，也会用clearfix呀，这叫做“稳上加稳”）

13.1.4 方法4：隔墙法

隔墙法就是在两部分结束之后，用一个新的div分割上下两部分，稳稳隔开它们，看它们还敢乱套？？！！

<div>
    <p>浮动了</p>
    <p>浮动了</p>
    <p>浮动了</p>
</div>
<div></div> → 这是一堵墙，设置了clear: both; 稳稳的分开了上下两部分
<div>
    <p>浮动了</p>
    <p>浮动了</p>
    <p>浮动了</p>
</div>

这种方法挺好用的，有的前端程序员就是喜欢隔墙，就是心里觉得稳。

HTML与CSS基础重点总结（四）