1.盒模型簡介

<li>W3C組織建議把所有的網頁上的對象都放在一個盒子中(在定義盒子寬高的時候，要考慮到內填充，邊框，邊界的存在）。

以下是幾個基本屬性：
1.內容：content
2.填充（內邊距）：padding
3.邊框：border
4.邊界（外邊距）：margin

盒模型

<li>盒模型一共有兩種模式，一種是標準模式，另一種就是怪異模式。

無論使用哪種模式完整定義DOCTYPE，都會觸發標準模式，而如果DOCTYPE缺失則在ie6，ie7，ie8下將會觸發怪異模式（quirks 模式）。

w3c標準盒模型

外盒模型:
元素空間寬度 = content width + padding + border + margin的寬度
元素空間高度 = content width + padding + border + margin的高度
內盒模型:
元素寬度 = content height + padding + border的寬度
元素高度 = content height + padding + border的高度

IE盒模型

** IE盒子模型：**

外盒模型:
元素空間寬度 = content width + margin的寬度
元素空間高度 = content height + margin的高度
內盒模型:
元素寬度 = content width
元素高度 = content height

2.以下代碼的作用？兼容性？

      }：```
css3屬性box-sizing：
box-sizing有兩個值一個是content-box，另一個是border-box。
當設置為box-sizing:content-box時，將采用**標準模式**解析計算，也是默認模式；
當設置為box-sizing:border-box時，將采用**怪異模式**解析計算；
兼容性：
![](http://upload-images.jianshu.io/upload_images/2399926-3dbb5c12698db84d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

######所有的盒模型，只要沒有添加doctype，都處于怪異模式，但此時，只有ie678使用ie盒模型，其他的雖然處于怪異模式，但仍舊使用標準模型，其實與普通模式效果相同,怪異模式是在ie6時代為了兼容ie5以及以前版本的瀏覽器保留的 現在實際使用中都使用標準模式 添加doctype。
***
##3.text-align: center的作用是什么，作用在什么元素上？能讓什么元素水平居中
<li>text-align:center;是使標簽的內容居中，針對于行內元素，相對于其父容器居中。
<li>margin:0 auto;是使自身在瀏覽器內居中，需要配合寬度使用，針對塊級元素使用，且此時float:left和right會失效。
***
**本教程歸本人和饑人谷所有，轉載需說明來源。**