【面试必备】CSS盒模型的点点滴滴

　　从接触CSS布局开始，就一直在听盒模型的概念了，网上的文章有很多，深浅不一。有些人会认为盒模型很简单，不就是border、margin、padding、content嘛，一个元素所占的空间就是把它们都加起来~仅仅如此吗？当然不是，盒模型的概念其实挺好理解，但难的是与其他属性一块使用时产生的现象。下面把我知道的一些特性梳理一下，这也是css中最基础的知识，面试常会问的东西。

盒模型的基本概念

　　正如上面说的，盒子模型的几个要素就是border、margin、padding、content，相信你已经听过很多次了，就像下面这张百看不厌的图一样：

　　不过要明确的是，这里所说的盒子是指块级(block-level)元素，行内元素有自己的一套标准，正如给行内元素设置margin-top无效一样，不在这个盒子的讨论范围之内。本篇文章所说的盒子就是针对块级元素。一个盒子其实是包含了四层，分别是content-box，padding-box，border-box，margin-box，它们的分界线就是上面画出的那四个轮廓。这四个概念非常重要，后面我们要进行的各种边界区分，就以它们为标准来讨论。

　　一个盒子在没有被定位时，即没有加position也没有float，在普通流中所占的空间就是这些值的总和。即横向空间为：marginLeft + borderLeftWidth + paddingLeft + width + paddingRight + borderRightWidth + marginRight，纵向的同理。

　　jQuery用多了，竟然忘记了如何用原生js来取这些值，所以在这里也提一下。首先如果css样式是写在行内的，即元素的style属性中，那么直接通过element.style.marginLeft这样就可以取到。如果样式不在行内（通常情况都不在），通过style是无法取到的。IE和opera支持currentStyle属性，可以取到定义在外部的样式，其他浏览器则需要通过window.getComputedStyle来取，所以完整的获取属性的代码应该如下：

var element = document.getElementById('id');
var currentStyle = null;
if(element.currentStyle){
    currentStyle = element.currentStyle;
}
else{
    currentStyle = window.getComputedStyle(element);
}
console.log(currentStyle.marginTop);

宽度的计算

　　从简单的开始，我们给一个盒子指定样式width:100px，是给上述四层盒子的哪一层来指定的呢？是content-box，即最内层的内容区域。另外我们也知道，元素的宽度会被它的padding撑开，实际的宽度会是width + padding。那border会不会撑开元素的宽度呢？这个。。平时写边框大多数就是1个像素宽，基本忽略了。。。其实border也是会撑开宽度的。那margin会不会呢？都是外边距了，已经在盒子外头了怎么会撑开呢，少年你想多了~

　　这样来看，光一个宽度就会有三种值，我们来举个栗子：

<style>
#container{
    position: relative;
    width: 400px;
    height: 400px;
    background-color: lightgreen;
    overflow:hidden;
}
#box1{
    width: 100px;
    height: 100px;
    margin: 20px;
    padding: 20px;
    border:20px dotted;
    background-color: lightblue;
}
</style>
<div id="container">
    <div id="box1"></div>
</div>

box1

getComputedStyle(box1).width : 100px
box1.clientWidth : 140
box1.offsetWidth : 180

　　我这里姑且把它们分别叫做“指定宽度”、“实际宽度”、“偏移宽度”。指定宽度就是css样式中的width值，实际宽度是被padding撑开后的宽度，由clientWidth属性可访问到，偏移宽度是被border撑开后的宽度，由offsetWidth可以访问到。这里我又想到了jQuery，jq中有两种方式可以取到元素的宽度，它们取到的是哪个值呢，来看一下：

var $width = $('#box1').width();
console.log($width);//

var csswidth = $('#box1').css('width');
console.log(csswidth);//100px

　　可以看到两者都是取到了指定宽度，不同的是.width()返回一个数字100，可以直接参与数值运算。而.css('width')返回了字符串100px。

　　上面是指定了宽度值的情况，如果不指定宽度的盒子是怎样的呢？首先对于一个只有content-box的盒子，它会沾满父元素的整行宽度，就像是指定了width:100%一样，如下图：

　　如果指定了margin值，那么这个content-box的宽度就变成了父容器的宽度减去margin值，即除了外边距剩下的宽度：

　　看来默认宽度挺好理解的，就是父容器减去margin值后剩余的宽度，是能自适应的~

　　但情况远不是这么简单。当元素有float属性或position为absolute时，宽度就不是自适应的了，而是会收缩起来，包裹住内容。例如我给粉色区域加了position:absolute，就变成这样了：

　　事实上，在给粉色元素加上display:inline-block时，也会收缩起来像上面一样。inline-block的内容谈起来也不是一篇文章能说清的，在本篇就不探讨了。我们还是继续聊宽度。

　　我们在进行自适应布局时，会使用百分比作为宽度单位，这样页面可以适应不同大小的屏幕。然而我们常常还需要设置一些比较小的间距，我在看响应式设计那本书时作者建议无论多小的长度都使用百分比，即你可能会写出这样的css代码：margin-left:0.3212332%; 当然这数值你用计算器算下的，如果能除尽，你可以把小数位数全写出来，尽管不好看，但可以保证精确。但总有除不尽的时候，当我们进行四舍五入的时候，有时候稍稍大了那么一点，就会出现元素被挤到下一行的尴尬场面。这个时候你多么希望，那5px的边距直接写成5px就好，再也不必计算什么百分比。

　　啰嗦了这么多，我其实就是想介绍一个css3的新特性而已。。。它就是calc，让你的宽度值通过计算得出。最关键的时，它支持百分比和像素混合计算，简直太酷了，话不多说，上栗子：

#box3,#box4{
    height: 100px;
    padding: 10px;
    background-color: orange;
    border:5px solid;
    float: left;
}
#box3{
    width: 40%;
}
#box4{
    width: 60%;
}
<div id="container">
    <div id="box3">box3</div>
    <div id="box4">box4</div>
</div>

box3

box4

　　在上面这种情况下，由于padding和border的存在，实际两个div的宽度加起来要比100%大，所以box4就被挤到下一行了。下面我们来试试这个calc的威力，把box3和box4的宽度修改为：

#box3{
    width: -webkit-calc(40% - 30px);
}
#box4{
    width: -webkit-calc(60% - 30px);
}

box3

box4

　　这下就不会换行了。需要注意的是calc是css3的新属性，现在支持度还不高，需要加私有前缀使用。另外要注意的一点是，运算符号+-(加减)与数值之间一定要留有空格，否则会被认为是非法的取值。而*/(乘除)运算符则不需要。

background的覆盖区域

　　设置背景色我们平时用的太多了，不知你是否注意过，元素的背景到底是以哪个区域为边界的呢，border-box?padding-box?还是content-box?不着急回答，我们需要分两种情况，设置背景色和背景图片。

　　先说背景色，通过background-color设置的背景色总是填充满border-box，我们用一个虚线框的元素就可以看出来，就像上面的box1一样：

box1

　　下面来看背景图片的情况，通过background-image设置的背景图片默认填充padding-box，看下面的代码：

<style>
#box5{
    width: 200px;
    height: 300px;
    margin: 20px;
    padding: 20px;
    border:30px dotted;
    background-image: url(http://images.cnblogs.com/cnblogs_com/lvdabao/507840/o_Img347406026.jpg);
    background-repeat: no-repeat;
}
</style>
<div id="box5">box5</div>

box5

　　左上方从padding-box的区域开始填充，右侧和下侧超出后会超到border-box的区域，但不会超到margin-box，这也是合理的。

　　在背景图片中，我之所以说“默认”而不是“总是”，是因为现在我们可以通过background-origin来设置背景图片的填充区域了，这是css3的一个新属性，用于设置了background-repeat为no-repeat的元素。它的取值有三种：padding-box、border-box、content-box，分别指定背景图片的填充区域。这三个值正好对应我前边说的盒子模型的概念。效果你应该能想象到，我们来试一下吧：

box5

background-origin:
border-box
padding-box
content-box

overflow:hidden;隐藏了哪里？

　　我们都知道overflow:hidden;可以隐藏掉内容超出元素的部分，但是你有没有细细探究过到底是超出哪里的部分呢？具体来说就是，超出content-box被隐藏？超出padding-box被隐藏？还是超出border-box？通过下面的例子便可一探究竟：

<style>
#box1{
    width: 100px;
    height: 100px;
    margin: 20px;
    padding: 20px;
    border:20px dotted;
    background-color: lightblue;
    overflow: hidden;
}
#box1_1{
    width: 200px;
    height: 200px;
    background-color: red;
}
</style>
<div id="box1">
    <div id="box1_1"></div>
</div>

　　效果如下：

 

　　可以看到红色盒子被隐藏掉了padding-box以外的部分，子元素的内容并不会延伸到父元素的边框上，这也是符合常规逻辑的。

left/top的定位参照点

　　当给一个元素指定position:absolute;后，即绝对定位，便可以参照它的包含块(containing block)进行定位。所谓包含块就是指父级元素中最近的拥有定位属性的元素，即position值不为static的元素。通过left和top值来指定相对包含块的左上角的偏移距离。那么这个“左上角”具体是指哪里呢？是下面ABCD四个点中的哪一个？同样，元素自己的点又是取哪一个呢？

　　通过下面的例子来探究一下：

<style>
#container2{
    position: relative;
    width: 400px;
    height: 400px;
    margin: 20px;
    padding:20px;
    border: 20px dotted;
    background-color: lightgreen;
}
#box6{
    position: absolute;
    width: 100px;
    height: 100px;
    padding: 20px;
    border: 10px dotted;
    background-color: red;
}
</style>
<div id="container2">
    <div id="box6"></div>
</div>

 

子元素有margin 子元素无margin
left/top为0left/top为默认值

　　通过点击上面的按钮，我们可以得出以下几个结论：

• 元素自身的参照点是最外围的盒子，即margin-box，如果没有margin就以border-box，以此类推。
• left/top值为默认值(auto)，元素还在原来的位置上，即紧贴父元素的content-box区域左上侧。
• left/top指定值后，参照父元素的padding-box左上角，即我们上面图中的C点。

取负值的情况

　　border、padding取负值都是非法的，而margin取负值是合法的，而且还大有所用。简单来说，margin会影响元素的宽高，使元素往回“缩”一定的长度。看下面的例子：

<style>
#box7,#box8{
    width: 200px;
    height: 200px;
    background-color: red;
    border: 1px solid;
}
#box7{
    background-color: green;
    margin-bottom: -100px;
}
</style>
<div id="box7">box7</div>
<div id="box8">box8</div>

box7

box8

　　尽管box7的高度指定为200px，但因为margin-bottom:-100px让它缩回去100px，所以只剩100px的高度了。关于margin负值的应用场景非常的经典，我这里就不一一列举了，可参考瑶姐的这篇文章：http://blog.doyoe.com/~posts/css/2013-12-06-margin%E7%B3%BB%E5%88%97%E4%B9%8B%E5%86%85%E7%A7%80%E7%AF%87.md

BFC

　　BFC同样也是盒模型中非常重要的一个概念，出于篇幅的原因，我不能详细的解释了，有一篇文章介绍的非常好，可参考http://blog.melonhuang.gitpress.org/~docs/css/1formattingContext.md