一個(gè)重要的觀點(diǎn)！！！

元素部分inline元素和block元素！！！

元素可以通過以下3種來改變默認(rèn)的屬性。

• display：inline（內(nèi)聯(lián)元素）
  • 流動(dòng)方向：從左到右排列，直到這一行排滿，會(huì)出現(xiàn)折行現(xiàn)象。
• display:block（塊級(jí)元素）
  • 流動(dòng)方向：每個(gè)元素占一行的從上到下排列。（不管他本身長(zhǎng)短，獨(dú)占一行）
• display:inline-block（內(nèi)聯(lián)塊元素）
  • 從左到右排列，但不會(huì)折行。

文檔流(normal flow):正常的流動(dòng)方向；（從左到右，從上到下）。

圖1：默認(rèn)的流動(dòng)方向

寬度：

inline元素的寬度是由內(nèi)部inline元素的總和決定的，不能夠用width指定。（特別注意：display：inline元素里面不能夠有display：block元素）

block元素的寬度是默認(rèn)（auto）計(jì)算的，能有多寬有多寬；可以用width來指定寬度。（特別注意：永遠(yuǎn)不要指定寬度為100%）

inline-block元素的寬度結(jié)合兩者，但可以用width指定。默認(rèn)和span一樣

長(zhǎng)度單位：px，em，%；（常用的三種），整數(shù)，rem，以及vw和vh。

圖2：詳解寬度。

高度：

inline的高度由line-height（行高）間接決定的，跟height無(wú)關(guān)，不可以指定高度。但可以接受padding。（改變的不是span的高度，而是看的見的高度。）<span></span>有高度，高度為行高。

block的高度由內(nèi)部文檔流元素的總和決定（正常流動(dòng)的文檔流元素），可以設(shè)置height。有些元素會(huì)脫離文檔流，所以父元素在算高度的時(shí)候不會(huì)將脫離文檔流元素的高度算進(jìn)去。<div></div>的高度為0

inline-block跟block類似，也可以設(shè)置height。

溢出文檔流(overflow)：

圖3 溢出文檔流（overflow）

overflow解決方法：

• overflow: auto;（自動(dòng)顯示滾動(dòng)條，當(dāng)你超出時(shí)顯示，不超出時(shí)候不顯示）

圖4 overflow：auto；

托尼

• overflow: hidden;（超出部分隱藏）

圖5 overflow：hidden；

• overflow: scroll；（超出部分用戶可以使用滾動(dòng)條查看，橫豎都有滾動(dòng)條，就算你不超出，也會(huì)出現(xiàn)滾動(dòng)條。款式丑，不用。）

圖6 overflow:scroll

• overflow: visible;（超出部分可見的，就是和圖3一樣，他的默認(rèn)就是overflow:visible;）

脫離文檔流:

由block元素的高度定義可知：block元素的高度是由其內(nèi)部文檔流的高度決定的，可以設(shè)置height。但有些元素是脫離文檔流的，脫離文檔流的元素是不會(huì)被父元素計(jì)算高度的。

脫離文檔流方法：

絕對(duì)定位： position:absolute; 或者 position：fixed；

float:left; 或者 float: right;

圖7 div的高度由1和2決定。但是1和2都已經(jīng)脫離文檔流，不被父元素所計(jì)算高度。

---

本文為陳瑾儀的原創(chuàng)文章，著作權(quán)歸本人和饑人谷所有，轉(zhuǎn)載務(wù)必注明來源。

總結(jié)

以上是生活随笔為你收集整理的文档自动排序长短_css 文档流的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。