1. 程式人生 > >css盒子模型 - 初識CSS必會的盒子模型,非常詳細的講解,望幫助到初學者。

css盒子模型 - 初識CSS必會的盒子模型,非常詳細的講解,望幫助到初學者。

#初學CSS必須要會的盒子模型:
###首先,我先給你們介紹一下與盒子模型有關的CSS屬性。
####1.margin:
該屬性為外邊框,包含四個值:margin-top、margin-right、margin-bottom、margin-left.
分別為上、右、下、左外邊框。(要記住這個上右下左的順序,其他屬性也會用到。)
margin是可以直接寫一個值(即上右下左四個邊框都為40px),例如:

css程式碼:

#simple{
	margin:40px;
}

等同於:

#simple{
	margin-top:40px;
	margin-right:40px;
	margin-left:40px;
	margin-bottom:40px;
}

同理,如果margin後面跟兩個值(40px,100px),則代表上下邊框為40px,左右邊框為100px。

css程式碼:

#simple{
	margin:40px 100px;
}

如果是四個值(10px,20px,30px,40px),則代表上右下左邊框分別為10px,20px,30px,40px。
margin-top、margin-right、margin-bottom、margin-left這四個屬性可以單獨出現,用於單獨設定外邊框屬性的情況。
####2.padding:該屬性為內邊框,用法同於margin,學會使用margin就學會了padding。
####3.border:該屬性為邊框屬性(也可以理解為邊線,描邊),與margin相同有四個值,同為上右下左順序。不同的是它多了兩個值,分別為border-style、border-color.
####4.還有一點就是內容。這指的不是屬性,是你標籤設定的寬度和高度(也可以說盒子的最大容量),而且你在標籤中加入的東西(子標籤)的寬度如果大於你的盒子(父標籤)根據標籤的屬性可能會擴大你的父標籤。這點先不用理解。

###這時候,我們引入盒子模型的概念,為什麼要明白盒子模型?

我們用一個瀏覽器隨意開啟一個網頁,然後右鍵選擇“檢查”或者“檢視元素”。如下面兩個圖,不同瀏覽器盒子的樣子也是不同的。
找到盒子
找到盒子

這裡我用Firefox瀏覽器做示範。

火狐盒模型

我們能看到我隨機選擇的這個元素的內容部分大小是500*22。然後呢,這個盒模型上面,還有三個屬性:分別是外邊距(margin),邊框(border),填充(padding)。

所以這個盒模型所佔頁面的寬度為:7(左外邊距)+0(左邊框)+0(左填充)+500(元素寬度)+0(右填充)+0(右邊框)+0(右外邊距)=507(預設單位為畫素)。
學會寬度計算,這個盒模型所佔頁面的高度應該就會了吧?不妨自己動手動腦試試計算吧。(頁面上的為28畫素)
####這時候,大家一定有這樣一個疑問,為什麼要算這個值?
#####因為我們在前端開發的時候,一個頁面是由若干個元素組成,你若想讓他們整齊排列,或者說按照你的意願排布,你就不得不有一個設計頁面的過程,設計頁面就免不了一個精確的計算完成頁面效果(在做專案時,一般都是做效果圖的人計算,然後拿給你,按照他給的尺寸做出來)

###現在,我們來講幾個例子。
####1.這是一個寬度、高度都為100畫素的背景色為黑色的盒子。

<div id="div1" style="width:100px;height:100px;background-color:#000;"></div>

div1效果
####2.這是一個寬度、高度為100畫素,外邊距為50畫素背景色為紅色的盒子(div1)。

<div id="div2" style="width:100px;height:100px;background-color:#CC0000;margin:50px"></div>

div2效果

很明顯,能看到這個盒子比上一個盒子距離瀏覽器的兩邊都遠了,這時候,我們在紅色盒子(div2)下面再加上div1。

div1、div2對比

兩個盒子中間有距離,這是因為我們設定了margin:10px的屬性,讓紅色盒子(div2)的四邊外邊距都等於50px,所以紅色盒子整個的大小應該是寬高各200px。
(寬度=左外邊距+右外邊距+div寬度,同理高度也是這麼得出來的)

這裡寫圖片描述

##*問題:
###1.如果一個寬高各100px的盒子margin-top為20px,margin-right為30px,padding-left為33px,padding-right為28px,border為1px,那麼這個盒子實際佔頁面的寬、高分別為多少?
(正確答案:寬:193px,高:122px)
如果你得到的值有1-2px的偏差說明你忘了加上border,而且無論高還是寬都不能忘了border的上右下左都為1px。
###2.一個盒子有如下屬性:

#box
{
	width:50px;
	height:30px;
	padding:0 10 20 30;
	margin:1 5 5 10;
	border:3px solid #eee;
}

###那麼它的所佔寬、高是多少呢?
(正確答案:寬:111px,高:62px)

如果這個部落格看到這裡,上面兩個問題可以做出來,或者是已經理解,說明你已經基本掌握了盒模型。
如果有什麼問題,歡迎樓下提問。