CSS標準文件流與脫離文件流

阿新 • • 發佈：2021-01-13

技術標籤：css

標準文件流

文件流：指的是元素排版佈局過程中，元素會預設自動從左往右，從上往下的流式排列方式。並最終窗體自上而下分成一行行，並在每行中從左至右的順序排放元素。

標準流的微觀現象：

空白摺疊現象：
在 html 檔案輸入文字，多個空格會被合併成一個空格顯示到瀏覽器頁面中。這種現象稱為空白摺疊現象。
高矮不齊，底邊對齊：
文字還有圖片大小不一，都會讓我們頁面的元素出現高矮不齊的現象，但是在瀏覽器檢視我們的頁面總會發現底邊對齊；
自動換行，一行寫不完時，換行寫：
如果在一行內寫文字過多，超過介面，那麼瀏覽器會自動換行去顯示我們的文字。

標準文件流等級

分為兩種等級：塊級元素和行內元素；

塊級元素：

霸佔一行，不能與其他任何元素並列
能接受寬、高
如果不設定寬度，那麼寬度將預設變為父親的100%，即和父親一樣寬

行內元素：

與其他元素並排
不能設定寬、高。預設的寬度就是文字的寬度

在HTML中，標籤分為：文字級和容器級；
文字級：p、span、a、b、i、u、em
容器級：div、h系列、li、dt、dd

CSS的分類和上面的很像，就p不一樣：所有的文字級標籤，都是行內元素，除了p，p是個文字級，但是是個塊級元素。所有的容器級標籤都是塊級元素。

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

塊級元素可以設定為行內元素；行內元素也可以設定為塊級元素。
舉個例子：

div {
  display: inline;
  background-color: pink;
  width: 400px;
  height: 400px;
}

display是顯示模式，用來改變元素的行內、塊級性質inline就是“行內”，一旦給一個標籤設定display:inline;
那麼這個標籤立即變為行內元素。

此時div和span沒有什麼區別;
此時的div不能設定寬度和高度（即使設定了也並不顯示出來);
此時div可以和別人並排;

同理

span {
   display: block;
   width: 300px;
   height: 300px;
   background-color: green;
}

“block”是“塊”的意思;

span標籤變為塊級元素，與div無異；
span能夠設定高度和寬度；
span必須霸佔一行，別人不能與之並排；

如果不設定寬度，那麼將撐滿父親。

脫離標準文件流

三種方法：
1）浮動
浮動的元素會脫離文件流；
新建一個文件在頁面上新增兩個div給div分別加上class。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
</body>
</html>

給div設定一個寬高及背景顏色給one左浮動

<style>
* {
/*清除預設邊距*/
margin: 0;
padding: 0;
       }
div {
width: 200px;
height: 200px;
       }
.one {
float: left;
background-color: orange;
       }
.two {
background-color: yellow;
       }
</style>

然後用Chrome開啟結果會是這樣