CSS佈局（inline和block）

Yjjtt發表於2018-12-17
CSSinlineBloC

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

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

display

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

  • 外部顯示型別(display-outside)
display: block;
display: inline;
複製程式碼
  • 內部顯示型別
display: flow;
display: table;
display: flex;
複製程式碼

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

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

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

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

CSS佈局（inline和block）

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

CSS佈局（inline和block）

上面情況是因為: 中文, 例如"哈哈", 會被認為是兩個詞"哈"和"哈", 而英文"hello", 就是一個詞, 所以出現中文會被break, 使一個詞被打斷可以使用word-break

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

CSS佈局（inline和block）

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

CSS佈局（inline和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;
}
複製程式碼

相關文章