標準文檔流

web頁面和ps等設計軟件有本質的區別，web 網頁的製做，是個「流」，從上而下 ，像 「織毛衣」。而設計軟件 ，想往哪裏畫東西，就去哪裏畫

標準文檔流下有如下微觀現象

1.空白摺疊現象

多個空格會被合併成一個空格顯示到瀏覽器頁面中。img標籤換行寫。會發現每張圖片之間有間隙，若是在一行內寫img標籤，就解決了這個問題，可是咱們不會這樣去寫咱們的html結構。這種現象稱爲空白摺疊現象。

2.高矮不齊，底邊對齊

文字還有圖片大小不一，都會讓咱們頁面的元素出現高矮不齊的現象，可是在瀏覽器查看咱們的頁面總會發現底邊對齊

3.自動換行，一行寫不滿，換行寫

若是在一行內寫文字，文字過多，那麼瀏覽器會自動換行去顯示咱們的文字

塊級元素和行內元素

標準文檔流等級森嚴。標籤分爲兩種等級：

• 行內元素
• 塊級元素

好比h1標籤和span，同時設置寬高，來看瀏覽器效果,你會發現：

行內元素和塊級元素的區別：

行內元素：

• 與其餘行內元素並排；
• 不能設置寬、高。默認的寬度，就是文字的寬度。

塊級元素：

• 霸佔一行，不能與其餘任何元素並列；
• 能接受寬、高。若是不設置寬度，那麼寬度將默認變爲父親的100%。

塊級元素和行內元素的分類：

在HTML中，將標籤分爲了：文本級、容器級。

從HTML的角度來說，標籤分爲：

• 文本級標籤：p、span、a、b、i、u、em。
• 容器級標籤：div、h系列、li、dt、dd。

　　PS：由於p裏面只能放文字&圖片&表單元素，p裏面不能放h和ul，p裏面也不能放p。

 

如今，從CSS的角度講，CSS的分類和上面的很像，就p不同：

• 行內元素：除了p以外，全部的文本級標籤，都是行內元素。p是個文本級，可是是個塊級元素。

• 塊級元素：全部的容器級標籤都是塊級元素，還有p標籤。

塊級元素和行內元素的相互轉換

咱們能夠經過display屬性將塊級元素和行內元素進行相互轉換。display即「顯示模式」。

塊級元素能夠轉換爲行內元素：

一旦，給一個塊級元素（好比div）設置：

display: inline;

那麼，這個標籤將當即變爲行內元素，此時它和一個span無異。inline就是「行內」。也就是說：

• 此時這個div不能設置寬度、高度；
• 此時這個div能夠和別人並排了

行內元素轉換爲塊級元素：

一樣的道理，一旦給一個行內元素（好比span）設置：

display: block;

那麼，這個標籤將當即變爲塊級元素，此時它和一個div無異。block」是「塊」的意思。也就是說：

• 此時這個span可以設置寬度、高度
• 此時這個span必須霸佔一行了，別人沒法和他並排
• 若是不設置寬度，將撐滿父親

標準流裏面的限制很是多，致使不少頁面效果沒法實現。若是咱們如今就要並排、而且就要設置寬高，那該怎麼辦呢？辦法是：移民！脫離標準流！

css中一共有三種手段，使一個元素脫離標準文檔流：

1. 浮動
2. 絕對定位
3. 固定定位