盒子

盒子模型 英文：box model。
最常見的盒子是div span

盒子中的區域：

1.寬 width px
2.高 height
3.內邊距 padding
4.邊框 border
5.外邊距 margin
【注】 標準盒模型的寬和高和盒子真實佔有的寬高不是一個概念。

【注】
盒子的寬不設定時，預設為100%；但是寬度一般會做設定，高度卻不一定。

盒子真實佔有的寬：內容的寬+左右padding+左右邊框
盒子真實佔有的高：內容的高+上下padding+上下邊框

內邊距

內容與邊框的距離。
內邊距的區域也會被背景渲染。

padding有四個方向：上下左右。
寫法：
1.小屬性
padding-left
padding-right
padding-top
padding-bottom

2.複合屬性寫法：
四種寫法：
一值法：
padding:20px; 上下左右的padding相等。
二值法
padding:20px 10px; 上下 左右
三值法：
padding:20px 10px 30px; 上 左右 下。
四值法：
padding：10px 20px 30px 40px; 上 右 下 左 順時針。

小技巧：
若只有單個方向的內邊距與其他內邊距不同，可以先設定總體，再用單一屬性單獨設定不同的內邊距。

border 邊框

盒子佔有的最外層的區域。

border是一個複合屬性。
border有三個要素：寬度，線的型別，顏色。

按三要素拆分：
border-width 設定寬度
border-style 設定線的型別
border-color 設定顏色

按照三要素與方向設定

        border-left-width
        border-left-style
        border-left-color

按照方向設定：

    border-left
    border-right
    border-top
    border-bottom

製作三角步驟

1.寬高設定為0；
2.取消對應的邊框。
3.將相鄰的邊框顏色設定為白色（透明色）

margin 外邊距

盒子與盒子之間的距離。
margin有四個方向：上下左右。
寫法：
1.小屬性

    margin-left
    margin-right
    margin-top
    margin-bottom

2.複合屬性寫法：
四種寫法：
一值法：
margin:20px; 上下左右的margin相等。
二值法
margin:20px 10px; 上下 左右
三值法：
margin:20px 10px 30px; 上 左右 下。
四值法：
margin：10px 20px 30px 40px; 上 右 下 左
順時針。

auto:代表自適應。
會將剩餘的空間自動分配給設定auto的外邊距。

margin : 0 auto;
可以讓盒子水平居中。

盒子的內容多少不確定時，為了保證元素的高度始終合適，不會出現大片留白與溢位，這種情況下一般不設定高度，而是用內容去撐開高度。

子盒子的整體佔有的位置不要超過父盒子的內容區域
若子盒子不設定寬度，會自動撐滿父盒子的內容區域。
若不設定寬，只設定內邊距和邊框，寬度會自適應。

 <style>
    .father{
        width: 300px;
        height: 300px;
        background-color: seagreen;
        padding: 50px;
    }
    .son{
        height: 200px;
        padding-left: 10px;
        border: 10px solid #000;
        background-color: sienna;
    }
</style>

<div class="father">
    <div class="son">
    </div>
</div>

外邊距塌陷

水平方向不會出現這種現象

1.上下盒子的外邊距塌陷
垂直方向上相鄰的兩個元素，如果都有外邊距，則相交的地方會出現外邊距重合現象，也叫作外邊距塌陷。

在垂直方向上，margin有相遇的部分，不是取兩個margin的和，而是取最大值。

當margin相遇的部分，一個值為正，一個值為負，結果為兩個值的和。
當margin相遇的部分，兩個值都為負數，結果為絕對值最大的。

解決辦法：
1.BFC規範（暫時不解釋）
2.兩個上下相鄰的同級盒子之間，為了避免出現外邊距塌陷，儘量只設定上盒子的底部margin或下盒子的頂部margin。

巢狀盒子的外邊距塌陷

父盒子沒有填充內容，也沒有設定頂部邊框，那麼子盒子的margin-top會讓父盒子與子盒子一起掉下來。

解決辦法：
1.有填充內容即可。（不推薦）
2.給父盒子新增頂部的邊框。（不推薦）
3.將margin換成padding。

同級之間的盒子距離使用margin，父子盒子使用padding。

盒模型分為兩類

1.標準盒模型
設定的width和height是指內容的寬和高。增加內邊距與邊框會影響盒子的真實尺寸，但不會影響內容區域的大小。
2.IE盒模型（怪異盒模型）、
設定的width和height是指盒子的真實尺寸。增加內邊距與邊框會影響內容區域的大小，但不會影響盒子的真實尺寸。

標準文件流

定義：內容必須是從左到右，由上往下書寫。前面的內容大小或位置發生變化時，後面的內容也會隨之變化。
html網頁就是一個標準文件流。

1.空白摺疊現象
無論多少個空格，換行 縮排，都會摺疊成一個空格。
2.高矮不齊，底部對齊。
3.自動換行

行內元素,塊級元素,行內塊

標準文件流將HTML元素分為了三種
1.行內元素 inline
可以與其他行內元素並排展示。
設定寬高無效。
實際的寬高，由內容的寬高來決定。
2.塊級元素 block
獨佔一行。
可以設定寬高
3.行內塊元素 inline-block
可以設定寬高
可以與其他行內元素或行內塊元素並排。

容器級標籤 div h li dt dd
文字級標籤 span p a i em b

行內元素：除了p標籤之外，所有的文字級標籤都是行內元素。p標籤是文字級標籤，但屬於塊級元素。
塊級元素：所有的容器級標籤都是塊級元素，包括p標籤。

通過display屬性來檢視當前元素的型別。
也可以通過該屬性修改當前元素的型別。

塊級元素轉行內元素
display:inline; 擁有行內元素的屬性，塊級元素屬性就會失效。
行內元素轉塊級元素
display:block; 擁有塊級元素的屬性，行內元素屬性就會失效。
轉行內塊元素
display:inline-block；
1.可以設定寬高
2.可以與其他行內元素並排。

浮動

標準文件流的限制比較多，導致頁面效果很多無法實現。
為了可以並排展示，又可以設定寬高，我們可以脫離標準文件流。

css中一共有三種方法可以脫標：
1.浮動
2.絕對定位
3.固定定位

設定浮動的方法：
float：left/right
設定浮動的元素會脫離標準文件流
浮動會在原來的位置上浮起來。
一個元素一旦浮動，那麼就可以並排展示，同時可以設定寬高。
【注】設定浮動之後，不要再設定display屬性了。

每一個浮動元素都會去緊靠上一個浮動元素

標準文件流的文字不會被浮動元素遮擋

一個浮動的元素，如果沒有設定寬高，那麼元素將自動收縮為內容的寬高

如果浮動的子元素的寬的和大於父盒子的寬，那麼後面的子元素會換行

。