從零開始學習html（十二）CSS布局模型——上，css布局

從零開始學習html（十二）CSS布局模型——上，css布局
一、css布局模型

清楚了CSS 盒模型的基本概念、 盒模型類型， 我們就可以深入探討網頁布局的基本模型了。

布局模型與盒模型一樣都是 CSS 最基本、 最核心的概念。

但布局模型是建立在盒模型基礎之上，又不同於我們常說的 CSS 配置樣式或 CSS 布局模板。

如果說布局模型是本，那麼 CSS 布局模板就是末了，是外在的表現形式。

 
CSS包含3種基本的布局模型，用英文概括為：Flow、Layer 和 Float。

在網頁中，元素有三種布局模型：
1、流動模型（Flow）
2、浮動模型 (Float)
3、層模型（Layer）

這三個布局模型究竟是什麼布局？

二、流動模型（一）

 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>流動模式下的塊狀元素</title> 6 <style type="text/css"> 7 #box1{ 8     width:300px; 9     height:100px;10 }11 div,h1,p{12     border:1px solid red;13 }14 </style>15 </head>16 <body>17     <div id="box2">box2</div><!--塊狀元素，由於沒有設定寬度，寬度預設顯示為100%--> 18     <h1>標題</h1><!--塊狀元素，由於沒有設定寬度，寬度預設顯示為100%--> 19     <p>文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段。</p><!--塊狀元素，由於沒有設定寬度，寬度預設顯示為100%--> 20     21     <div id="box1">box1</div><!--塊狀元素，由於設定了width:300px，寬度顯示為300px-->22 </body>23 </html>

流動模型（一）

先來說一說流動模型，流動（Flow）是預設的網頁配置模式。

也就是說網頁在預設狀態下的 HTML 網頁元素都是根據流動模型來分布網頁內容的。

流動布局模型具有2個比較典型的特徵：

第一點，塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分布，因為在預設狀態下，塊狀元素的寬度都為100%。

實際上，塊狀元素都會以行的形式佔據位置。如代碼編輯器中三個塊狀元素標籤(div，h1，p)寬度顯示為100%。

觀查一下右側代碼編輯器中的代碼，感受一下塊狀元素的特點：“在預設狀態下，塊狀元素的寬度都為100%”。

三、流動模型（二）

 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>流動模式下的內嵌元素</title> 6 <style type="text/css"> 7  8 </style> 9 </head>10 <body>11     <a href="http://www.imooc.com">www.imooc.com</a><span>強調</span><em>重點</em>12     <strong>強調</strong>13 </body>14 </html>

流動模型（二）

第二點，在流動模型下，內嵌元素都會在所處的包含元素內從左至右水平分布顯示。

（內嵌元素可不像塊狀元素這麼霸道獨佔一行）

代碼編輯器中內嵌元素標籤a、span、em、strong都是內嵌元素。

觀查一下代碼編輯器中的代碼，感受一下在流動模型下，內嵌元素的特點：“包含元素內從左至右水平分布顯示”。

 

流動模型：
1 區塊層級元素從上到下垂直顯示 寬度100%
2 內嵌元素從左至右水平分布顯示

 

四、浮動模型

 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>浮動模型</title> 6 <style type="text/css"> 7 div{ 8     border:2px red solid; 9     width:200px;10     height:400px;11     12 }13 14 </style>15 </head>16 <body>17 <div id="div1">欄目1</div>18 <div id="div2">欄目2</div>19 </body>20 </html>

浮動模型

塊狀元素這麼霸道都是獨佔一行，如果現在我們想讓兩個塊狀元素並排顯示，怎麼辦呢？

不要著急，設定元素浮動就可以實現這一願望。

任何元素在預設情況下是不能浮動的，但可以用 CSS 定義為浮動，

如 div、p、table、img 等元素都可以被定義為浮動。如下代碼可以實現兩個 div 元素一行顯示。

div{    width:200px;    height:200px;    border:2px red solid;    float:left;}<div id="div1"></div><div id="div2"></div>

當然你也可以同時設定兩個元素右浮動也可以實現一行顯示。

div{    width:200px;    height:200px;    border:2px red solid;    float:right;}

又有小夥伴問了，設定兩個元素一左一右可以實現一行顯示嗎？當然可以：

div{    width:200px;    height:200px;    border:2px red solid;}#div1{float:left;}#div2{float:right;}

 

來試試，在右側的代碼編輯器中試一試使兩個欄目並排顯示出來且兩個欄目都是靠左對齊。

在代碼編輯器中的第 11 行輸入下面代碼：

float:left;

3個欄目並排顯示，可以利用之前學習的{inline-block}