CSS內(nèi)聯(lián)元素和塊級(jí)元素, 內(nèi)聯(lián)塊級(jí)元素
HTML語言標(biāo)簽元素被分為三種類型: 內(nèi)聯(lián)元素(行內(nèi)元素), 塊級(jí)元素, 內(nèi)聯(lián)塊級(jí)元素, 元素類型決定了
display
display CSS 屬性指定了元素的顯示類型，它包含兩類基礎(chǔ)特征，用于指定元素怎樣生成盒模型——外部顯示類型定義了元素怎樣參與流式布局的處理，內(nèi)部顯示類型定義了元素內(nèi)子元素的布局方式
- 外部顯示類型(display-outside)
display: block;
display: inline;
- 內(nèi)部顯示類型
display: flow;
display: table;
display: flex;
**元素display樣式?jīng)Q定了布局的方式, 直接影響的是height **
標(biāo)簽div的高度, 由其內(nèi)部文檔流元素的高度總和決定, 并不是相等.
文檔流: 文檔內(nèi)部元素的流動(dòng)方向.
- 如果文檔內(nèi)部是內(nèi)聯(lián)元素(inline), 文檔流流動(dòng)方向就是從左到右布局, 如果流動(dòng)遇到阻礙, 寬度不夠, 換行繼續(xù)流
image
內(nèi)聯(lián)元素的內(nèi)容如果是英文, 當(dāng)超過了div寬度時(shí), 并不會(huì)將一個(gè)詞打斷, 然后如果包含中文一個(gè)詞就會(huì)被打斷
image
上面情況是因?yàn)? 中文, 例如"哈哈", 會(huì)被認(rèn)為是兩個(gè)詞"哈"和"哈", 而英文"hello", 就是一個(gè)詞, 所以出現(xiàn)中文會(huì)被break, 使一個(gè)詞被打斷可以使用word-break
span{
word-break: break-all;
}
image
- 如果文檔內(nèi)部是塊級(jí)元素(block), 文檔流布局方向就是從上到下布局, 一個(gè)塊占據(jù)一行, 依次向下布局, 即使一個(gè)塊寬度不足以達(dá)到總寬度.
image
內(nèi)聯(lián)元素
內(nèi)聯(lián)元素(inline), 也叫行內(nèi)元素.一個(gè)行內(nèi)元素只占據(jù)它對(duì)應(yīng)標(biāo)簽的邊框所包含的空間.
- 常見行內(nèi)元素
<a></a> <abbr></abbr> <em></em> <strong></strong> <span></span>
<br> <img> <script></script> <label></label>
- 特點(diǎn)
- 元素從左到右流動(dòng)布局.
- 元素的高度和寬度,以及頂部和底部邊距不可設(shè)置.
- 元素的高度也就是它自身的建議行高
- 內(nèi)聯(lián)元素轉(zhuǎn)block元素:
display: block;
塊級(jí)元素
塊級(jí)元素(block), 塊級(jí)元素占據(jù)其父元素（容器）的整個(gè)空間囱嫩，因此創(chuàng)建了一個(gè)“塊”.
- 常見塊級(jí)元素
<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>
- 特點(diǎn)
- 每個(gè)塊級(jí)元素都從新的一行開始榕栏，并且其后的元素也另起一行渴丸。（真霸道底燎，一個(gè)塊級(jí)元素獨(dú)占一行）
- 元素的高度蠢络、寬度禾唁、行高以及頂和底邊距都可設(shè)置效览。
- 元素寬度在不設(shè)置的情況下，是它本身父容器的100%（和父元素的寬度一致）荡短，除非設(shè)定一個(gè)寬度丐枉。
- block元素轉(zhuǎn)inline元素:
display: inline;
內(nèi)聯(lián)塊級(jí)元素
Inline-block, 就是同時(shí)具備內(nèi)聯(lián)元素、塊狀元素的特點(diǎn).
- 常見內(nèi)聯(lián)塊級(jí)元素
<button></button> <input> <textarea></textarea>
- 特點(diǎn)
- 和其他元素都在一行上, 左右布局.
- 元素的高度掘托、寬度瘦锹、行高以及頂和底邊距都可設(shè)置.
- 相當(dāng)于添加浮動(dòng)
float: left;, 但是不建議使用inline-block, 最好使用float加clearfix;
.clearfix::after{
content: '';
display: block;
clear: both;
}
