一、盒模型

1.1 盒子的區域

一個盒子的主要屬性5個：width、height、padding、border、margin

padding：內邊距

border：邊框

margin：外邊框

1.2 認識width、height

一個盒子的真實佔有的寬度：左border+左padding+width+右padding+右border

一個盒子的真實佔有的高度：上border+上padding+height+下padding+下border 

如果想保持一個盒子的真實佔有寬度不變：那麼加width要減padding，加padding要減width

高度同理。

6.3 padding

padding 就是內邊距。padding的區域有背景顏色，background-color填充的是border以內的所有區域

padding是四個方：兩種描述padding的方法。

1）小屬性：

padding-top：30px;

padding-right：20px；

padding-bottom：40px;

padding-left:100px;

2)綜合屬性：

padding：30px 20px 40px 100px;

                 上      右     下      左

要懂得小屬性層疊大屬性：

padding：20px;

padding-left:30px;

很多元素都帶有預設的padding，比如ul，所以在做網站的時候便於控制，需要清除預設的padding，*效率不高，採用並集選擇器羅列所有的標籤清除padding（專業的樣式表）

1.4border

就是邊框。有三要素：粗細，線型，顏色

顏色預設黑色，其他兩個如果不寫，就顯示不出邊框。

border：1px dashed red;

dashed:虛線 solid：實線 dotted:圓點

border 屬性可以被拆分為兩種方式：

1）三要素拆分：

border-width、border-style、border-color

border-width：1px;

border-style:solid;

border-color:red;

等價於：border：1px solid red;

2）方向拆分：

border-top、border-right、border-bottom

 二、標準文件流

標準文件流的微觀現象：

1）空白摺疊現象

2）高矮不齊，底邊對齊

3）自動換行

2.1塊級元素和行內元素

標籤分兩種等級：

1）塊級元素

     霸佔一行，不與其他任何元素並列

     能接受寬高

     如果不設定寬度，寬度將預設為父親的100%

2) 行內元素

    與其他行內元素並排

    不能設定寬高，預設就是文字的寬高

1、HTML將標籤分為容器級和文字級：

容器級：div h dt dd li 等

文字級：p span b a em u i 等

2、CSS將標籤分為塊級元素和行內元素：

塊級元素：div h dt dd li p等

行內元素：a span em b u i  等

注意：不要將兩者混淆！

2.2塊級元素和行內元素的相互轉換

div {
display：inline；
width：50px;
height:500px;
}

此時，div將變成行內元素，這是將不能設定寬高。

span {
display：block；
width：200px;
height：200px;
}

此時，這個標籤可以設定寬高，獨佔一行。

脫離標準流：css中的三種手段

1）浮動

2）絕對定位

3）固定定位

三、浮動

浮動是css裡面佈局最多的屬性

3.1 浮動的元素脫標

一個span標籤不需要轉變成塊級元素就能設定寬高。一旦一個元素浮動了，就能並排了，並且能設定寬高，不論原來是什麼。

span{

float：left；//左浮

width：200px;

height: 200px;

}

3.2浮動的元素相互貼靠

3.3浮動元素有“字圍”效果

<div>

        <img src="images/1.jpg"/>

</div>

<p>文字文字...文字 </p>

讓div浮動，p不浮動，會出現文字圍著圖片的效果。

3.4 浮動元素的收縮

收縮：一個浮動的元素，如果沒有設定width，那麼將自動收縮為文字的寬度

比如：

div{
float：left；
background-color：gold；
}
<div>
  文字
</div>

這個div浮動了，並且沒有設定寬度，那麼將自動縮緊為內容的寬度。