CSS佈局（inline和block）

CSS內聯元素和塊級元素, 內聯塊級元素

HTML語言標籤元素被分爲三種類型: 內聯元素(行內元素), 塊級元素, 內聯塊級元素, 元素類型決定了

---

display

display CSS 屬性指定了元素的顯示類型，它包含兩類基礎特徵，用於指定元素怎樣生成盒模型——外部顯示類型定義了元素怎樣參與流式佈局的處理，內部顯示類型定義了元素內子元素的佈局方式

• 外部顯示類型(display-outside)

display: block;
display: inline;
複製代碼

• 內部顯示類型

display: flow;
display: table;
display: flex;
複製代碼

**元素display樣式決定了佈局的方式, 直接影響的是height **

標籤div的高度, 由其內部文檔流元素的高度總和決定, 並非相等.

文檔流: 文檔內部元素的流動方向.

1. 若是文檔內部是內聯元素(inline), 文檔流流動方向就是從左到右佈局, 若是流動遇到阻礙, 寬度不夠, 換行繼續流

內聯元素的內容若是是英文, 當超過了div寬度時, 並不會將一個詞打斷, 而後若是包含中文一個詞就會被打斷

上面狀況是由於: 中文, 例如"哈哈", 會被認爲是兩個詞"哈"和"哈", 而英文"hello", 就是一個詞, 因此出現中文會被break, 使一個詞被打斷可使用word-break

span{
    word-break: break-all;
}
複製代碼

1. 若是文檔內部是塊級元素(block), 文檔流佈局方向就是從上到下佈局, 一個塊佔據一行, 依次向下佈局, 即便一個塊寬度不足以達到總寬度.

內聯元素

內聯元素(inline), 也叫行內元素.一個行內元素只佔據它對應標籤的邊框所包含的空間.

• 常見行內元素

<a></a> <abbr></abbr> <em></em> <strong></strong> <span></span>
<br> <img> <script></script> <label></label>
複製代碼

• 特色

1. 元素從左到右流動佈局.
2. 元素的高度和寬度,以及頂部和底部邊距不可設置.
3. 元素的高度也就是它自身的建議行高
4. 內聯元素轉block元素: display: block;

塊級元素

塊級元素(block), 塊級元素佔據其父元素（容器）的整個空間，所以建立了一個「塊」.

• 常見塊級元素

<div></div> <address></address> <article></article> <audio></audio> <canvas></canvas> <dd></dd> <dl></dl> <footer></footer> 
<form></form> <hr> <header></header> <h1>-<h6> <ol></ol>
<p></p> <section></section> <table></table> <ul></ul>
<video></video>
複製代碼

• 特色

1. 每一個塊級元素都重新的一行開始，而且其後的元素也另起一行。（真霸道，一個塊級元素獨佔一行）
2. 元素的高度、寬度、行高以及頂和底邊距均可設置。
3. 元素寬度在不設置的狀況下，是它自己父容器的100%（和父元素的寬度一致），除非設定一個寬度。
4. block元素轉inline元素: display: inline;

內聯塊級元素

Inline-block, 就是同時具有內聯元素、塊狀元素的特色.

• 常見內聯塊級元素

<button></button> <input> <textarea></textarea>
複製代碼

• 特色

1. 和其餘元素都在一行上, 左右佈局.
2. 元素的高度、寬度、行高以及頂和底邊距均可設置.
3. 至關於添加浮動float: left;, 可是不建議使用inline-block, 最好使用float加clearfix;

.clearfix::after{
    content: '';
	display: block;
	clear: both;
}
複製代碼