CSS文件流通俗介紹

admin發表於2018-08-25
CSS

本文將以通俗易懂的方式介紹一下文件流的概念。

如果從原理方面必然涉及到瀏覽器如何解析HTML程式碼，如何將其渲染繪製展現於瀏覽者面前。

上述方式闡述雖然正確深邃，可能並不有助於初學者接受概念，進而應用到實際工作中。

比較抽象難於理解的概念，可以不要急於一時，只要巨集觀上知道它是如何執行的，具體細節可以隨著工作經驗的增加和知識儲備量的增長不斷得到更深一層的理解和鞏固。

一.文件流通俗介紹：

文件是頁面所展現的內容比如div元素、p元素或者span元素等，而流則是展現內容的規則。

規則簡單介紹如下：

（1）.內聯元素可以在一行排列。

（2）.塊級元素預設需要單獨佔據一行。通過這些規則，文件上的元素就會一定的方式展現出來

可以將文件流比作車流：

（1）.車類比為div元素或者p元素。

（2）.流則是交通規則和汽車物理特性。

展現在我們眼前的則是井然有序的滾滾鐵流。

二.程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  width:150px;
  height:150px;
  margin:5px;
}
.a {
  background-color:green;
}
.b {
  background-color:blue;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
</html>

div是塊級元素，他們會分別一上一下各自佔據一行，這就是文件流。

三.脫離文件流：

將元素設定為float浮動、絕對定位或者固定定位可以將元素脫離文件流。

CSS3中的一些屬性也可以將元素脫離文件流，這裡不一一介紹。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  width:150px;
  height:150px;
  margin:5px;
}
.a {
  background-color:green;
  float: left;
}
.b {
  background-color:blue;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
</html>

元素a脫離文件流，它好像起飛了一樣，不再佔據原有的空間，b元素就可以佔據它原來的地方。

脫離文件流通俗描述：

前面說過文件流可以類比車流。那麼脫離文件流的元素，就好比可以空陸兩用的汽車，它在道路中由於一些原因起飛了，那麼它原來在道路上行駛的位置就會空餘出來，它後面的車輛自然就可以補上這個空缺。

相關文章