1. 程式人生 > >CSS基礎之盒子模型及浮動佈局

CSS基礎之盒子模型及浮動佈局

盒模型

     談到盒模型,有經驗的小夥伴一定滾瓜爛熟,無非就是 內容(content)、填充(padding)、邊框(border)、邊界(margin)

這些屬性我們可以把它轉移到我們日常生活中的盒子(箱子)上來理解,日常生活中所見的盒子也就是能裝東西的一種箱子,也具有這些屬性,所以叫它盒子模式。

先上圖:

上圖清晰的表明了盒模型的具體表現樣式; margin外邊距+border邊框+padding內邊距+content內容;

既然盒模型叫做盒模型~那麼我們可以把它比作一個 液晶螢幕包裝盒子(樓主剛剛買了一臺,所以拿它來比喻了,大家都知道的 這玩意兒快遞的時候padding可不少啊)  拆快遞的時候,裡面的顯示屏就是內容(content) 而泡沫呢?就是內邊距(padding)  外面的殼子就是(border)  然後呢 就是盒子與其他盒子之間的距離(margin) 這就組成了我們css中的盒模型;

css中盒模型有很多種表現形式:其中 block(塊狀)、inline(行內)、(inline-block以塊狀形式表現的行內元素) 設定css display可以改變盒子的表現形式 下面會詳細介紹

個人覺得css可以這麼去理解:它規定了盒子的包裝樣式,盒子的擺放位置,盒子的長寬高等等等等,瀏覽器就像是一個房子,等待人們用箱子填滿它;

下面呢,樓主簡單介紹一下 內容(content)、填充(padding)、邊框(border)、邊界(margin)在css中的具體表現,以及他們所帶的看似bug的另類屬性。

1.內容(content)

內容包括了文字,塊狀盒子,圖片,內容盒子的盒模型等等......栗子:

複製程式碼
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>demohtml</title>
    
</head>
    <body>
        <style type="text/css">
            .div1{ background: red;}
        </style>
        <div class="div1">
            div標籤預設是一個塊狀(block)盒子
        </div>
    </body>
    
</html>
複製程式碼

上圖程式碼得到的結果是:(樓主直接敲在編輯器裡了)

div標籤預設是一個塊狀(block)盒子

 div標籤其預設的表現形式是block,通過觀察我們可以得到 block塊狀盒子預設的寬度是100%,而高度右文字撐開,文字就是它的(content內容);如果沒有文字,並且沒有規定高度,那麼它的高度為0;

看圖 文字的高度是21  邊框 內邊距 外邊距 都為0 寬度為100% (樓主螢幕14寸的 小啊);

block(塊狀),它通常是一個外部容器 用來承載需要的內容 常用的塊級元素有  div,p,h1 , header,footer,nav 等等......

inline(行內)

行內元素,顧名思義,一行內的元素,塊狀裡面的元素,常見的有a標籤,i(傾斜標籤),em,span,s(刪除線),strong(加粗),b等等等等

行內元素的表現形式主要在於填充內容,它預設是沒有上下外邊距的,只可以左右;

<div class="div1">
            div標籤預設是一個塊狀(block)盒子
           <a href="#">這是一個超級連結</a>
   </div>

上圖與程式碼表示了行內元素的表現形式  其寬高等於內容的寬高  且,不可以直接設定它的寬度和高度,設定寬度和高度並沒有什麼卵用;

我們可以使用 display:block;來讓它變成塊狀。block也可以使用display:inline;來讓塊狀變成行內;

2.內邊距(padding)

 內邊距規定了內容與邊框之間的填充距離,栗子:

複製程式碼
<style type="text/css">
            .div2{  padding: 20px; border: 1px solid #000099;}
            .div2 a{ background: red;}
        </style>
        <div class="div2">
            <a href="#">div標籤預設是一個塊狀(block)盒子</a>
        </div>
複製程式碼

樓主將div2的內邊距設為上下左右各20px,需要注意的是 現在div2的高度是 padding+content+邊框,20x2+2= 42px 這在某些時候會產生一些令人疑惑的問題,但是以盒模型的概念,它是正確的;

即 盒子的高度包括內邊距 但 css屬性設定的是content的高度  比如div3高度設為100px,注意這個時候 div3的實際高度等於 100+40+2=142px

複製程式碼
<style type="text/css">
            .div3{  padding: 20px; border: 1px solid #000099; height:100px;}/*注意這個時候 div1的實際高度等於  100+40+2=142px*/
            .div3 a{ background: red;}
        </style>
        <div class="div3">
            <a href="#">div標籤預設是一個塊狀(block)盒子</a>
        </div>
複製程式碼

 3.邊框(border)

 border預設為0;你可以隨意指定它的某一個邊的邊框;其屬性樓主也就不一一介紹了,再來一個傳送門:CSS border邊框屬性教程(color style)

4.外邊距(margin)

外邊距規定了盒子與盒子之間的距離,因此它不會被計算到盒子的總體寬高之中,盒子內的盒子的外邊距則會影響父級元素的寬度和高度;

margin是用來隔開元素與元素的間距;padding是用來隔開元素與內容的間隔。margin用於佈局分開元素使元素與元素互不相干;padding用於元素與內容之間的間隔,讓內容(文字)與(包裹)元素之間有一段“呼吸距離”。  這裡也是直接給一個傳送門吧,寫起來這篇博文可就太長了......  css外邊距詳解

浮動

w3shool對浮動的解釋:

  浮動的框可以向左或向右移動,直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。

  由於浮動框不在文件的普通流中,所以文件的普通流中的塊框表現得就像浮動框不存在一樣。

以推箱子游戲為例,將箱子往左推 直到它碰到邊界 或者另外一個箱子就會停止下來 看圖:

  

藍色盒子往左浮動 (float:left) 紅色箱子緊跟著往左浮動(float:left;) 橙色箱子往右浮動(float:right;)  藍色在遇到邊界之後,停止在左上角。紅色緊跟著左浮動,它遇到了同樣是左浮動元素的藍色,所以它停止在藍色的結尾。 而橙色方塊向右浮動直到遇到邊界或者同樣右浮動的元素則停止;

浮動元素會脫離當前文件流,以一種特殊的形式存在,因為它不再處於文件流中,所以它不佔據空間

框1向左浮動,因為框1不再存在文件流中,框2被框1遮蓋,圖2當三個框同時向左浮動時,它們同是float元素,成列狀排列;

另外一個特性是:如果包含框寬度小於內部浮動元素的總寬度,浮動元素會向下移動,直到有足夠的空間;

如果浮動元素的高度不同,那麼當它們向下移動時可能被其它浮動元素“卡住”:

行框和清理

浮動框旁邊的行框被縮短,從而給浮動框留出空間,行框圍繞浮動框。

因此,建立浮動框可以使文字圍繞影象:

複製程式碼
<style type="text/css">
            .div1{height:200px; width: 100px; float: left; background: #ff9000;}
            .div1 a{ background: red;}
            .div2{height:200px; width: 100px; float: left; background: red;}
            .div3{height:200px; width: 100px; float: right; background: #002A80;}
        </style>
        <div class="div1">
            
        </div>
        <div class="div2">
            
        </div>
        <div class="div3">
            
        </div>
        <div class="text">
            這是文字
        </div>
複製程式碼

如果要想文字另換一行,與浮動框互不干擾,需要對該框應用 clear 屬性。clear 屬性的值可以是 left、right、both 或 none,它表示框的哪些邊不應該挨著浮動框。

複製程式碼
<style type="text/css">
            .div1{height:200px; width: 100px; float: left; background: #ff9000;}
            .div1 a{ background: red;}
            .div2{height:200px; width: 100px; float: left; background: red;}
            .div3{height:200px; width: 100px; float: right; background: #002A80;}
        </style>
        
        <div class="div1">
            
        </div>
        <div class="div2">
            
        </div>
        <div class="div3">
            
        </div>
        <div style="clear: both;"></div>  //清除上面浮動元素的影響
        <div class="text">
            這是文字
        </div>
複製程式碼