1.盒模型

每一個盒子有四條邊界：外邊距邊界margin, 邊框邊界border, 內邊距邊界padding與內容邊界content。

IE盒模型和W3C盒模型在計算總寬度存在一些差異

在W3C模型中: 總寬度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

在IE模型中: 總寬度 = margin-left + width + margin-right

在CSS3中引入了box-sizing屬性, 它可以允許改變默認的CSS盒模型對元素寬高的計算方式.

共包括兩個選項：

content-box：標準盒模型，CSS定義的寬高只包含content的寬高

border-box：IE盒模型，CSS定義的寬高包括了content，padding和border

2. 定位機制

標準文檔流

從左到右，從上向下，輸出文檔內容

由塊級元素(從左到右撐滿頁面，獨占一行，觸碰到頁面邊緣時自動換行的元素, 如div, ul, li, dl, dt, p)和行級元素組成(能在同一行內顯示并且不會改變HTML文檔結構，如span, input)

浮動

設置為浮動的元素將會往左(float:left)或者往右(float:right)漂移, 直到遇到阻擋 - 其他浮動元素或者父元素的邊框。浮動元素不在標準文檔流中占據空間,但會對其后的浮動元素造成影響。

絕對定位

設置為絕對定位的元素(posistion:absolute)將從標準文檔流中刪除，其所占據的標準流空間也不存在。然后通過top,left,right,bottom屬性對其相對父元素進行定位。

3. Flex布局

Flexbox又叫彈性盒模型。它可以簡單使用一個元素居中（包括水平垂直居中），可以讓擴大和收縮元素來填充容器的可利用空間，可以改變源碼順序獨立布局，以及還有其他的一些功能。

Flex布局是我最喜歡的布局，合理使用它能夠大大減少布局方面的工作, 例如以上列舉的三列布局也可以使用flex輕松實現。此外在移動端使用flex也比較常見。

4.?響應式布局(Responsive Web Design)

響應式布局是指，網頁可以自動識別設備屏幕寬度，根據不同的寬度采用不同的CSS的樣式，從而達到兼容各種設備的效果。

響應式布局使用媒體查詢(CSS3 Media Queries), 根據不同屏幕分辨率采用不同CSS規則, 使用方式如下:

@mediascreenand(max-width:1024px) {/* 視窗寬度小于1024px時 */....}

5.?哪些屬性可以繼承？

Css中可以繼承的屬性如下：

文本相關屬性：font-family、font-size、font-style、font-variant、font-weight、font?、letter-spacing、line-height、text-align、?text-indent、?text-transform?、word-spacing?、color；

列表相關屬性：list-style-image、list-style-position、list-style-type、list-style；

表格相關屬性：border-collapse、border-spacing、caption-side、table-layoute；

其他屬性：Cursor、visibility