Web前端面試指導(九)：盒子模型你是怎麼理解的？

問題分析

這道題問得比較寬泛，一定要找準切入點，如果切入點找不準，很容易亂答，甚至答偏，所以找準切入點是非常的重要的。

解答思路

1）盒子模型有兩種，W3C和IE盒子模型

（1）W3C定義的盒子模型包括margin、border、padding、content ，元素的width=content的寬度

  （2）IE盒子模型與W3C的盒子模型唯一區別就是元素的寬度，元素的width=content+padding+border

2）個人理解和心得，要記住在面試時，我們和面試官是平等的，而且面試官也非常欣賞喜歡交談的人，在面試的時候能夠去表達自己的想法，往往會給面試官留下非常好的印象。例如上面的盒子模型，示範如下：

我個人認爲W3C定義盒子模型與IE定義的盒子模型，IE定義的比較合理，元素的寬度應該包含border（邊框）和padding（填充），這個和我們現實生活的盒子是一樣的，W3C也認識到自己的問題了，所以在CSS3中新增了一個樣式box-sizing，包含兩個屬性content-box 和 border-box。

（1） content-box  元素的width=content+padding+border

[css] view plain copy 

.test1{
    box-sizing:content-box;
    width:200px;
    padding:10px;
    border:15px solid #eee;
}

（2） border-box   元素的width=width（用樣式指定的寬度）

[css] view plain copy 

.test1{
    box-sizing:border-box;
    width:200px;
    padding:10px;
    border:15px solid #eee;
}

加分項回答（自己比較獨到理解）

1.對於行級元素，margin-top和margin-bottom對於上下元素無效，margin-left和margin-right有效

2.對於相鄰的塊級元素margin-bottom和margin-top 取值方式

 1） 都是正數： 取最大值

   距離=Math.max(margin-botton,margin-top)

 2） 都是負數： 取最小值

   距離=Math.min(margin-botton,margin-top)

 3）上面是正數，下面是負數或者 上面是負數，下面是正數： 正負相加

   距離=margin-botton+margin-top

-------------------------------------------------------------------------------------------