【CSS】从牛腩中深入思考盒子模型

前言：

        在敲牛腩的时候老师讲到了盒子模型，当时并不是很明白，通过查阅资料，以及自己亲自敲代码实践，这里对盒子模型做一个总结。

        网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性，而这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模型

W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

 1、 属性值的简写形式

     1.如果给出2个属性值，前者表示上下的属性，后者表示左右的属性；
     2.如果给出3个属性值，前者表示上的属性，中间的数值表示左右的属性，后者表示下的属性；
     3.如果给出4个属性值，依次表示上、右、下、左的属性，即顺时针排序。

    eg：

<span style="font-size:18px;">border-color:red green;border-width:1px 2px 3px;border-style:dotted dashed solid double;</span>

 2、 标准流

所谓“标准流”，就是指在不使用其他的与排列和定位相关的特殊CSS规则时，各种元素的排列规则。

 3、元素的分类

     1）块级元素（block）：占一行

     块级元素div1和div2之间的垂直margin=MAX(div1的margin-bottom , div2的margin-top)。

     2）行内元素（inline）

     行内元素span1和span2之间的水平margin=span1的margin-right + span2的margin-left。

  3、 盒子在标准流中的定位原则

    1） 行内元素之间的水平margin

 

    2）块级元素之间的竖直margin

特殊的现象，叫做塌陷

 3）嵌套盒子之间的margin

  没有对父盒子做明确的高度设置

对父盒子做了明确的高度设置。

 

4、如何计算一个盒子？ 

 首先来看看IE的盒子模型

   

 例如一个盒子模型如下：margin:20px,border:10px,padding:10px;width:200px;height:50px;
如果用w3c盒子模型解释，那么这个盒子模型占用的
  宽度为：20*2+10*2+10*2+200=280px; 
  高度：20*2+10*2+20*2+50=130px;

  盒子的实际宽度大小为:10*2+10*2+200=240px;
  实际高度：10*2+10*2+50=90px;
  用ie的盒子模型解释 ：盒子在网页中占据的大小为20*2+200=240px; 高：20*2+50=90px;
  盒子的实际大小为：宽度:200px, 高度:50px;

那应该选择哪中盒子模型呢？当然是“标准 w3c 盒子模型”了。怎么样才算是选择了“标准 w3c 盒子模型”呢？很简单，就是在网页的顶部加上 doctype 声明。假如不加 doctype 声明，那么各个浏览器会根据自己的行为去理解网页，即 ie 浏览器会采用 ie 盒子模型去解释你的盒子，而 ff 会采用标准 w3c 盒子模型解释你的盒子，所以网页在不同的浏览器中就显示的不一样了。反之，假如加上了 doctype 声明，那么所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子，网页就能在各个浏览器中显示一致了。

学习心得：

     不管遇到什么样的小问题，只要肯查，就会发现原来小知识里面还蕴藏着好多知识。