第三章 盒子模型

第三章盒子模型?

盒子模型是CSS控制頁面時一個很重要的概念。只有很好地掌握了盒子模型以及其中每個元素的用法，才能真正地控制好頁面中的各個元素。本章主要介紹盒子模型的基本概念，并講解CSS定位的基本方法。?

所有頁面中的元素都可以看成是一個盒子，占據(jù)著一定的頁面空間。?

一個頁面由很多這樣的盒子組成，這些盒子之間會互相影響，因此掌握盒子模型需要從兩方面來理解。一是理解一個孤立盒子的內(nèi)部結(jié)構(gòu)，二是理解多個盒子之間的相互關(guān)系。第三章盒子模型?

CSS

盒子模型：

包括：

邊框

內(nèi)邊距

外邊距

元素內(nèi)容第三章盒子模型?

在

CSS

中，width

和

height

指的是內(nèi)容區(qū)域的寬度和高度

。增加內(nèi)邊距、邊框和外邊距

不會影響內(nèi)容區(qū)域的尺寸，但

是會增加元素框的尺寸。?

假設(shè)框的每個邊上有

10

個像

素的外邊距和

5

個像素的內(nèi)邊

距。如果希望這個元素框達(dá)到

100

個像素，就需要將內(nèi)容的

寬度設(shè)置為

70

像素，如圖。第三章盒子模型第三章盒子模型盒子模型的總寬度為盒子實際寬度=左邊框?qū)挾?左內(nèi)邊距+width+左內(nèi)邊距+左邊框?qū)挾群凶訉嶋H占用的寬度=左外邊距+左邊框?qū)挾?左內(nèi)邊距+width+右內(nèi)邊距+右邊框?qū)挾?右外邊距盒子模型的總高度為盒子實際高度=上邊框?qū)挾?上內(nèi)邊距+height+下內(nèi)邊距+下邊框?qū)挾群凶訉嶋H占用的寬度=上外邊距+上邊框?qū)挾?上內(nèi)邊距+height+下內(nèi)邊距+下邊框?qū)挾?下外邊距

屬性

border

border-style

border-width

border-color

border-bottom描述簡寫屬性。作用是在一個聲明中用來設(shè)置四個邊框的所有屬性。設(shè)置四個邊框的樣式，可以設(shè)置一到四個樣式。設(shè)置四個邊框的寬度，可以設(shè)置一到四個值。設(shè)置四個邊框的顏色，可以設(shè)置一到四個顏色。簡寫屬性。作用是在一個聲明中用來設(shè)置下邊框的所有屬性。border-bottom-colorborder-bottom-styleborder-bottom-width設(shè)置元素的下邊框的顏色。設(shè)置元素的下邊框的樣式。設(shè)置元素的下邊框的寬度。溫馨提示：推薦使用簡寫屬性，灰色屬性不推薦使用。第三章盒子模型----邊框?qū)傩?1)屬性

border-left描述簡寫屬性。用于在一個聲明中設(shè)置左邊框的所有屬性。border-left-colorborder-left-styleborder-left-widthborder-rightborder-right-colorborder-right-styleborder-right-width設(shè)置元素的左邊框的顏色。設(shè)置元素的左邊框的樣式。設(shè)置元素的左邊框的寬度。簡寫屬性。將所有用于右邊框的屬性設(shè)置于一個聲明中。設(shè)置元素的右邊框的顏色。設(shè)置元素的右邊框的樣式。設(shè)置元素的右邊框的寬度。溫馨提示：推薦使用簡寫屬性，灰色屬性不推薦使用。第三章盒子模型----邊框?qū)傩?2)屬性

border-top描述簡寫屬性。將所有用于上邊框的屬性設(shè)置于一個聲明中。border-top-colorborder-top-styleborder-top-width設(shè)置元素的上邊框的顏色。設(shè)置元素的上邊框的樣式。設(shè)置元素的上邊框的寬度。溫馨提示：推薦使用簡寫屬性，灰色屬性不推薦使用。第三章盒子模型----邊框?qū)傩?3)border-style

none

dotted

dashed

solid

double

groove

ridge

inset

outset

描述定義無邊框。定義點狀邊框。在大多數(shù)瀏覽器中呈現(xiàn)為實線。定義虛線。在大多數(shù)瀏覽器中呈現(xiàn)為實線。定義實線。定義雙線。雙線的寬度等于

border-width

的值。定義

3D

凹槽邊框。其效果取決于

border-color

的值。定義

3D

壟狀邊框。其效果取決于

border-color

的值。定義

3D

inset

邊框。其效果取決于

border-color

的值。定義

3D

outset

邊框。其效果取決于

border-color

的值。注意：IE瀏覽器不支持的border-style效果，在實際制作網(wǎng)頁的時候，不推薦使用。第三章盒子模型----邊框樣式(border-style)border-width

thin

medium

thick

length

inherit描述定義細(xì)的邊框。默認(rèn)。定義中等的邊框。定義粗的邊框。允許您自定義邊框的寬度。規(guī)定應(yīng)該從父元素繼承邊框?qū)挾?。溫馨提示：灰色屬性不推薦使用。第三章盒子模型----邊框?qū)挾?border-width)border-color

color_name

hex_number

rgb_number

transparent

inherit描述規(guī)定顏色值為顏色名稱的邊框顏色（比如

red）。規(guī)定顏色值為十六進(jìn)制值的邊框顏色（比如

#ff0000）。規(guī)定顏色值為

rgb

代碼的邊框顏色（比如

rgb(255,0,0)）。默認(rèn)值。邊框顏色為透明。規(guī)定應(yīng)該從父元素繼承邊框顏色。溫馨提示：灰色屬性不推薦使用。第三章盒子模型----邊框?qū)挾?border-width)?

元素的內(nèi)邊距在邊框和內(nèi)容區(qū)之間。?

CSS

padding

屬性定義元素邊框與元素內(nèi)容之間的空白區(qū)域。屬性paddingpadding-bottompadding-leftpadding-rightpadding-top描述簡寫屬性。作用是在一個聲明中設(shè)置元素的所內(nèi)邊距屬性。設(shè)置元素的下內(nèi)邊距。設(shè)置元