默認(rèn)情況下，一個(gè)盒子剛好容納下其中的內(nèi)容，但可以自定義盒子的大小。

一，盒子的大小

1.調(diào)整盒子的大小就要用到width和height屬性

2.屬性值可以用像素，百分?jǐn)?shù)或em值。

3.當(dāng)用百分?jǐn)?shù)時(shí)，盒子的大小與瀏覽器窗口的大小相關(guān)，但如果這個(gè)盒子被裝入另一個(gè)盒子中，那百分?jǐn)?shù)就是相對(duì)外部盒子的大小而言。

二，寬度限制

1.min-width屬性指定一個(gè)盒子在瀏覽器較窄時(shí)可以顯示的最小的寬度。

2.max-width屬性指定一個(gè)盒子在瀏覽器較寬時(shí)可以顯示的最大的寬度。

三，高度限制

1.,min-height屬性限制盒子的最小高度。

2.max-height屬性限制盒子的最高高度。

四，內(nèi)容溢出

當(dāng)內(nèi)容溢出盒子的時(shí)候，這就要用到了overflow屬性了。

1.overflow：hidden?

該屬性會(huì)直接把溢出盒子空間的內(nèi)容進(jìn)行隱藏。

2.overflow：scroll、

該屬性會(huì)在盒子上添加一個(gè)滾動(dòng)條，用戶就可以通過滾動(dòng)條查看其余的內(nèi)容。

五，邊框，外邊距和內(nèi)邊距

1.邊框（border）

每一個(gè)盒子都有邊框，即使這些邊框不可見或其寬度被設(shè)置為0像素。

邊框?qū)⒁粋€(gè)盒子的邊緣與另一個(gè)盒子隔開。

2.外邊距（margin）

外邊距位于邊框的邊緣之外。

設(shè)置外邊距將在相鄰的兩個(gè)盒子的邊框之間創(chuàng)建空隙。

3.內(nèi)邊距（padding）

內(nèi)邊距是指盒子邊框與盒子所包含內(nèi)容之間的空隙。

六，邊框的寬度

border-width是用來控制邊框的寬度的

1.控制邊框的寬度可以用像素也可以用：thin，medium，thick。注意：不可用百分?jǐn)?shù)。

2.可分別對(duì)邊框的四個(gè)方向進(jìn)行控制：

border-top-width

border-right-width

bordth-bottom-width

border-left-width

3.簡(jiǎn)單點(diǎn)還可以按順時(shí)針控制：如border-width：2px，2px，2px, 2px

七，邊框樣式

邊框的樣式是用border-style來控制的

1.實(shí)線：border-style:solid

2.一串方形點(diǎn)：border-style:dotted

3.虛線：border-style:dashed

4.兩條實(shí)線：border-style:double?

兩條實(shí)線的寬度是border-width屬性的值。

5.調(diào)入頁面的效果：border-style:groove

6.顯示在頁面上凸起的效果：border-style:ridge

7.顯示為嵌入頁面的效果：border-style:inset

8.看起來像是要凸出頁面的樣子：border-style:outset

9.不顯示任何邊框：border-style:hidden或border-style:none

10.也可以單獨(dú)設(shè)置邊框的一邊：

border-top-style

border-right-style

border-bottom-style

border-left-style

八，邊框的顏色

邊框的顏色用border-color設(shè)置

1.可單獨(dú)設(shè)置邊框的某一個(gè)方向的顏色

border-top-color

border-right-color

border-bottom-color

border-left-color

2.也可以更快捷的設(shè)置

border-color：#bbbbbb #ffffff #cccccc #ssssss

九，快捷方式

上面講了這么多的設(shè)置方法，是不是有點(diǎn)繁瑣，下面來講講簡(jiǎn)單化的

我們可以通過border屬性來同時(shí)設(shè)置邊框的寬度，樣式和顏色（一定要按這個(gè)順序）

如 ? ?border：3px solid #ssssaa;