一、塊于行：?

一、顯示：display：

block(塊級元素)? |? inline(行級元素)? |? inline-block? |none（無） ；

二、自適寬高

width:auto;? 自適寬度，跟隨父級元素

height:auto; 自適高度，由內容決定高度

三、塊級標簽的特點：

1、獨占一行

2、可設置尺寸

3、沒有明確寬度的時候，寬度由父級決定

4、沒有明確高度的時候，高度由內容決定

5、支持margin、padding

四、行級標簽的特點：

1、不會獨占一行，可與其他行級元素并排

2、不支持尺寸設置

3、對margin左右、padding左右支持較友好，

上下間距慎用?。?！

4、支持盒模型，但不會獨占一行

二、盒模型

一、盒模型組成：

外邊距margin? border邊界? padding內邊界? 內容尺寸width/heigh

二、盒模型分為：

標準盒模型、怪異盒模型

三、盒子與盒子之間用margin

盒子內部用padding

盒子尺寸盡量用auto ?

三、margin、padding

marign：外邊距（盒子與盒子之間的距離、盒子外部的距離）

margin-left：左邊距（auto、px）

margin-right：右邊距

margin-top

margin-bottom

margin：上? 右? 下? 左；

margin：上? 左右? 下；

margin：四個方向；

四、css引入方式

一、行間樣式優(yōu)缺點

優(yōu)點：不會產生額外請求

缺點：1、容易產生重復代碼，照成文檔體積變大

2、不利于維護

3、不符合結構樣式分離的規(guī)范

綜上所述，不建議使用行間樣式

二、在HTML中? style 中寫

優(yōu)點：不會產生額外請求

初步實現結構與樣式分離

缺點：代碼復用不方便

適合單頁面網站應用

三、外部引入

優(yōu)點：1、利于后期維護

2、可重復使用

3、實現了結構與樣式的分離

缺點：會產生額外的請求（后期會借助工具抹平）