web前端技能方法總結（css、js、jquery、html）（16）

一、盒模式（the box model）

1、CSS就是這樣看待元素的，它把每個單一的元素看作是一個盒子。每個盒子由内容區及可選的補白、邊框和邊界組成。

最裡面是内容區（width屬性用來定義元素的内容區的寬度），被可選的補白包圍着，又圍了一層可選的邊框，最外一層是可選的邊界。

用CSS可以控制盒子的各個方面：内容周圍補白的大小、元素有沒有邊框（以及類型和大小），以及元素之間有多少邊界。用CSS可以控制整個内容區周圍甚至任何一側（上、下、左、右）的補白寬度，也可以控制整個邊界或某一側邊界（上、下、左、右）的寬度。

補白和邊界的差別：邊界是元素之間的空間，而補白是内容周圍多出來的空間。如果有可見的邊框，補白在邊框裡面而邊界在邊框外面。把補白想成是元素的一部分，而邊界包圍着元素并把它和周圍的内容隔離開。

補白和邊界都用來提供更多可見的空間，不能直接給補白或邊界添加顔色或别的修飾，但因為它們是透明的，就會呈現背景顔色或背景圖像。在這一點上補白和邊界之間的不同是元素的背景顔色或背景圖像會延伸到補白底下，但不會到邊界。

如果在内容區本身周圍需要更多可見的空間，就用補白；相反，如果想在元素之間或元素和頁邊之間有空間，就用邊界。

2、CSS有一個padding屬性，可以用它在内容周圍設定相同大小的補白。可以把這個屬性設定成多少像素或邊框裡面部分的百分之幾。如 padding:25px; 我們在内容的四周（上、下、左、右）各添加了25像素的補白；要在左側添加補白，就要用padding-left屬性。

用CSS添加邊界和補白一樣，可以用百分數或像素定義邊界。 如 margin:30px; 在内容四周（上、下、左、右）各添加 30像素的邊界。屬性margin-right來增加右側的邊界。

注意，width屬性隻用來定義内容區的寬度，要指明整個盒子的寬度，需要添加内容區的寬度，左右邊界寬度，左右側補白及邊框寬度。即不能定義整個元素的寬度，你隻能定義内容區、補白、邊框和邊界的寬度，把這些全加起來就是整個元素的寬度。

3、可以設定内聯元素如、、的寬度，但是隻有排版時才能看到效果。也可以給這些元素添加邊界和補白、邊框。内聯元素的邊界和補白跟塊元素的稍有不同——如果在内聯元素的四周都添加了邊界，隻能看到左邊和右邊的空間。可以在内聯元素的上側和下側添加補白，不過這些補白不影響周圍的其他内聯元素的空間，是以補白會跟其他内聯元素重疊。圖像跟其他的内聯元素稍有不同。width、padding和margin屬性更接近于塊元素。