DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS特效代碼 >> 前端開發:css基礎知識之盒模型以及浮動布局。
前端開發:css基礎知識之盒模型以及浮動布局。
編輯:CSS特效代碼     

前端開發:css基礎知識之盒模型以及浮動布局

 

 

前言

     樓主的蠻多朋友最近都在學習html5,他們都會問到同一個問題 浮動是什麼東西?  為什麼這個浮動沒有效果?  這個問題樓主已經回答了n遍。今天則是把它寫到我的博客中,想知道自己過來翻就好啦 ^_^  下面樓主把當前的自己對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;來讓塊狀變成行內;

這裡由於篇幅過長,樓主點到即止,關於block與inline  傳送門:block,inline和inline-block概念和區別 

 

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>

 

div標簽默認是一個塊狀(block)盒子

樓主將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>

 

div標簽默認是一個塊狀(block)盒子

 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>
關於清除浮動。再給一個傳送門: 大篇幅詳細介紹了如何清除浮動;樓主這篇博文篇幅過長一一講解大家看著都累,傳送門共享一下 就不獻丑了   CSS技巧(一):清除浮動

事實上,現代網頁大量應用了浮動技術,其中有大量的技巧,樓主下一章一一講解;

總結

樓主偷懶了!樓主偷懶了!樓主偷懶了!重要的事情說三遍。本來樓主寫的是《css基礎知識之盒模型以及常見的布局方式。》 寫著寫著發現布局方式介紹完全篇幅巨大,所以只是簡要介紹了浮動布局,這麼一點篇幅已經很長了再寫下去要熬夜了。各位看官,大神輕噴啊。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved