盒子是CSS中的基礎概念，我們需要使用它來配置元素的外觀以及文檔的整體布局。
1. 為元素應用內邊距
應用內邊距會在元素內容和邊距之間添加空白。我們可以為內容盒的每個邊界單獨設定內邊距，或者使用 padding 簡寫屬性在一條聲明中設定所有的值。
如果使用百分數值指定內邊距，百分數總是根包含塊的寬度相關，高度不考慮在內。下面代碼展示了如何為元素應用內邊距。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Example</title> <style type="text/css"> p { border:10px double black; background-color: lightgray; background-clip: content-box; width: 380px; padding-top: 0.5em; padding-bottom: 0.3em; padding-left: 0.8em; padding-right: 0.6em; } </style></head><body><p> <p> 15歲的時候再得到那個5歲的時候熱愛的布娃娃，65歲的時候終於有錢買25歲的時候熱愛的那條裙子，又有什麼意義。 什麼都可以從頭再來，只有青春不能。 那麼多事情，跟青春綁在一起就是美好，離開青春，就是傻冒。 </p></p></body></html>
在代碼中，為盒子的每條邊應用了不同的內邊距，從下面的可以看出效果。此外，設定了 background-clip 屬性，因此內邊距地區不會顯示背景顏色，這樣可以突出內邊距的效果。
也可以使用 padding 簡寫屬性在一條聲明中為四條邊設定內邊距。可以為這個屬性指定1~4 個值。 如果指定4個值，那麼它們分別代表頂邊、右邊、底邊和左邊的內邊距。如果省略一個值，則最佳搭配方案如下：省略左邊的值，預設使用右邊的值；省略底邊的值，預設使用頂邊的值。如果只給一個值，則四條邊的內邊距都是這個值。
下面代碼清單展示了如何使用 padding 簡寫屬性。這個樣本中還添加了圓角邊框，展示了如何使用paddding以確保邊框不會在元素內容之上。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Example</title> <style type="text/css"> p { border:10px solid black; background: lightgray; width: 380px; border-radius:1em 4em 1em 4em; padding: 5px 25px 5px 40px; } </style></head><body><p> <p> 15歲的時候再得到那個5歲的時候熱愛的布娃娃，65歲的時候終於有錢買25歲的時候熱愛的那條裙子，又有什麼意義。 什麼都可以從頭再來，只有青春不能。 那麼多事情，跟青春綁在一起就是美好，離開青春，就是傻冒。 </p></p></body></html>
效果如所示，顯示了瀏覽器如何顯示代碼中指定的圓角邊框和內邊距。
如果不設定內邊距，邊框就會繪製在文本上。設定內邊距就能確保內容和邊框之間留出足夠的空間，不會出現這種情況。
2. 為元素應用外邊距
外邊距是元素邊框和頁面上圍繞在它周圍的所有東西之間的空白地區。圍繞在它周圍的東西包括其他元素和它的父元素。
跟內邊距屬性相似，即使是為頂邊和底邊應用內邊距，百分數值是和包含塊的寬度相關的。下面代碼清單展示了如何為元素添加外邊距：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Example</title> <style type="text/css"> img{ border: 4px solid black; background: lightgray; width: 150px; } #second img { margin: 4px 20px;} </style></head><body><p> <p id="first"> <img src="imgs/banana.png" alt="small banana"> <img src="imgs/banana.png" alt="small banana"> </p> <p id="second"> <img src="imgs/banana.png" alt="small banana"> <img src="imgs/banana.png" alt="small banana"> </p></p></body></html>
在代碼中，下面的兩個img元素，為其頂邊和底邊應用了4像素的外邊距，為左邊和右邊應用了20像素的外邊距。可以從下面的中看到外邊距圍繞元素製造的空白地區，途中上面的兩個img元素和下面的兩個img元素分部顯示的是設定外邊距前後的img元素。
外邊距有時候不顯示，即使設定了某個外邊距屬性的值。例如，為 display 屬性的值設定為 inline 的元素應用外邊距的時候，頂邊和底邊的外邊距就不會顯示。
3. 控制元素的尺寸
瀏覽器會基於頁面上內容的流設定元素的尺寸。有幾條詳細規則是瀏覽器在分配尺寸的時候必須遵循的。使用尺寸相關的屬性可以覆蓋這些行為。
前三個屬性的預設值都是 auto，意思是瀏覽器會為我們設定好元素的寬度和高度。也可以是用長度值和百分數值顯式指定尺寸。百分數值是根據包含塊的寬度來計算的（處理元素的高度也是根據這個寬度來）。下面的代碼清單展示了如何為元素設定尺寸。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Example</title> <style type="text/css"> p { width:75%; height: 100px; border: thin solid lightseagreen;} img { background: lightgray; border: 4px solid blueviolet; margin: 2px; height: 50%;} #first { box-sizing: border-box; width: 50%;} #second { box-sizing: content-box;} </style></head><body> <p> <img id="first" src="imgs/banana.png" alt="small banana"> <img id="second" src="imgs/banana.png" alt="small banana"> </p></body></html>
上述範例程式碼中有三個關鍵元素，一個p元素包含了兩個img元素。顯示效果如下，展示了瀏覽器如何顯示這些元素。
p元素是body元素的子項目。當將p元素的寬度表示為75%的時候，意思是告訴瀏覽器將p的寬度設定為包含塊（此處是body內容盒）寬度的75%，而不論其具體值是多少。如果使用者調整了瀏覽器視窗，body元素也會相應被調整，以確保p元素的寬度總是body內容盒寬度的75%。
3.1 設定一定尺寸的盒子
前面樣本中兩個img元素設定了相同的高度值（50%），但兩個圖片的高度在螢幕上看起來不一樣。這是因為使用box-sizing屬性改變了其中一個元素應用尺寸屬性的地區。
預設情況下，寬度和高度是需要計算的，之後才能應用到元素的內容盒。這裡說的是如果設定了元素的高度屬性是100px，那麼螢幕上的真實高度就是100px，這也算上了頂邊和底邊的內邊距、邊框和外邊距的值。box-sizing屬性允許指定尺寸樣式應用到元素盒子的具體地區，也就是不需要自己計算某些值。
3.2 設定最小和最大尺寸
可以使用最小和最大相關屬性為瀏覽器調整元素尺寸設定一定的限制。這讓瀏覽器對於如何應用尺寸調整屬性有了一定的自主權。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Example</title> <style type="text/css"> img { background: lightgray; border: 4px solid blueviolet; margin: 2px; box-sizing: border-box; min-width: 100px; width: 50%; max-width: 200px; } </style></head><body> <p> <img id="first" src="imgs/banana.png" alt="small banana"> </p></body></html>
在代碼中，為一個img元素應用了mix-width 和 max-width屬性，並將其出事寬度設定為包含塊的50%。這樣瀏覽器就有了一定靈活性來調整映像尺寸，使其在代碼中定義的最大尺寸和最小尺寸範圍內保持50%的關係。瀏覽器會利用這種靈活性保留映像的高寬比，如下面的顯示效果所示：
PS:瀏覽器對box-sizing屬性的支援情況各不相同。
4. 處理溢出內容
如果嘗試改變元素的尺寸，很快就會到達某一個點：內容太大，已經無法完全顯示在元素的內容盒中。這時的預設處理方式是內容溢出，並繼續顯示。下面的代碼清單建立了一個固定尺寸的元素，由於尺寸太小，無法顯示其中的內容。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Example</title> <style type="text/css"> p {width: 200px; height: 100px; border:medium double black;} </style></head><body><p> 你的特別不是因為你在創業，不是因為你進了牛企，不是因為你的牛offer，而是因為你就是你，堅信自己的特別，堅信自己的內心，勇敢做自己。 IT DOESN'T MATTER WHERE YOU ARE, IT MATTERS WHO YOU ARE. </p></body></html>
代碼中為p元素的width 和 height 屬性指定了絕對值，最終顯示在瀏覽器中的顯示效果如所示：
可以使用 overflow 屬性改變這種行為，下表列出了相關的 overflow 屬性。
overflow-x 和 overflow-y 屬性分部設定水平方向和垂直方向的溢出方式，overflow 簡寫屬性可在一條聲明中聲明兩個方向的溢出方式。下表展示了這三個屬性可能的取值。
下面代碼展示了溢出屬性的用法：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Example</title> <style type="text/css"> p {width: 200px; height: 100px; border:medium double black;} p:first-child { overflow: hidden;} p:last-child { overflow: scroll;} </style></head><body><p> 你的特別不是因為你在創業，不是因為你進了牛企，不是因為你的牛offer，而是因為你就是你，堅信自己的特別，堅信自己的內心，勇敢做自己。 IT DOESN'T MATTER WHERE YOU ARE, IT MATTERS WHO YOU ARE. </p><p> 你的特別不是因為你在創業，不是因為你進了牛企，不是因為你的牛offer，而是因為你就是你，堅信自己的特別，堅信自己的內心，勇敢做自己。 IT DOESN'T MATTER WHERE YOU ARE, IT MATTERS WHO YOU ARE. </p></body></html>
5. 控制元素的可見度
可以使用 visibility 屬性控制元素的可見度。這個屬性跟Javascript一起使用能建立一些比較複雜的效果。其取值如下：
下面的代碼展示了如何使用JavaScript和幾個按鈕元素改變元素的可見度。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Example</title> <style type="text/css"> tr > th { text-align: left; background: gray; color: white;} tr > th:only-of-type { text-align: right; background: lightgray; color: gray;} </style></head><body><table> <tr> <th>Rank</th><th>Name</th><th>Color</th><th>Size</th> </tr> <tr id="firstchoice"> <th>Favorite:</th><td>Apples</td><td>Green</td><td>Medium</td> </tr> <tr> <th>2nd Favorite</th><td>Oranges</td><td>Orange</td><td>Large</td> </tr></table><p> <button>Visible</button> <button>Collapse</button> <button>Hidden</button></p><script> var buttons = document.getElementsByTagName("button"); for(var i = 0;i < buttons.length; i++){ buttons[i].onclick = function(e){ document.getElementById("firstchoice").style.visibility = e.target.innerHTML; } } </script></body></html>
collapse 值只能應用到表相關元素，如tr 和 td。
6. 設定元素的盒類型
display 屬性提供了一種改變元素盒類型的方式，這想要會改變元素在頁面上的布局方式。下表列出了display 屬性允許的取值。
6.1 認識區塊層級元素
將 display屬性設定為block值會建立一個區塊層級元素。區塊層級元素會在垂直方向跟周圍元素有所區別。通常在元素前後放置分行符號也能達到這種效果，在元素和周圍元素之間製造分割的感受，就像文本中的段落。p元素表示段落，其預設樣式約定中就包括 display 屬性取 block 值。不過block 值可應用到所有元素，其用法如下面代碼所示：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Example</title> <style type="text/css"> p { border: medium solid black;} span { display: block; border: medium double black; margin: 2px;} </style></head><body><p>你的特別不是因為你在創業，不是因為你進了牛企，不是因為你的牛offer，而是因為你就是你，堅信自己的特別，堅信自己的內心，勇敢做自己。 <span>IT DOESN'T MATTER WHERE YOU ARE, IT MATTERS WHO YOU ARE.</span></p></body></html>
可以從看到span 元素的 display屬性 是否設定為 block 值的差別。
6.2 認識行內元素
將 display 屬性設定為 inline 值會建立一個行內元素，它在視覺上跟周圍內容的顯示沒有區別。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Example</title> <style type="text/css"> p { display: inline;} span { display: inline; border: medium double black; margin: 2em; width: 10em; height: 2em;} </style></head><body><p>你的特別不是因為你在創業，不是因為你進了牛企，不是因為你的牛offer，而是因為你就是你，堅信自己的特別，堅信自己的內心，勇敢做自己。 <span>IT DOESN'T MATTER WHERE YOU ARE, IT MATTERS WHO YOU ARE.</span></p></body></html>
在上述代碼中，為p元素和span元素同時使用了inline值，從下面的可以看出應用樣式後的效果：p元素和 span元素中的文本跟剩餘文本沒有分開，都顯示在一起。
使用 inline 值的時候，瀏覽器會忽略某些值，如 width、height 和margin 。上面的範例程式碼中，為span 元素定義的這三個屬性的值都沒有應用到頁面配置中。
6.3 認識行內-區塊層級元素
將display 屬性設定為 inline-block 值會建立一個其盒子混合了塊和行內特性的元素。盒子整體上作為行內元素顯示，這意味著垂直方向上該元素和周圍的內容並排顯示，沒有區別。但盒子內部作為區塊層級元素顯示，這樣，width、height 和 margin 屬性都能應用到盒子上。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Example</title> <style type="text/css"> p { display: inline;} span { display: inline-block; border: medium double black; margin: 2em; width: 10em; height: 2em;} </style></head><body><p> 15歲的時候再得到那個5歲的時候熱愛的布娃娃，65歲的時候終於有錢買25歲的時候熱愛的那條裙子，又有什麼意義。 什麼都可以從頭再來，<span>只有青春不能。</span>那麼多事情，跟青春綁在一起就是美好，離開青春，就是傻冒。 </p></body></html>
6.4 認識插入元素
display 屬性設定為run-in 值會建立一個這樣的元素：其盒子類型取決於周圍元素。
下面代碼展示了一個相鄰兄弟元素為區塊層級元素的插入元素：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Example</title> <style type="text/css"> p { display: block;} span { display:run-in; border: medium double black;} </style></head><body><p> By the time we add the countless types of apples, oranges, and other well-know fruit, we are faced with thousands of choices. </p><span> There are lots of different kinds of fruit - there are over 500 varieties of banana alone. </span><p>Hello </p></body></html>
下面代碼展示了一個相鄰兄弟元素為行內元素的插入元素，修改上面p的CSS代碼：
p { display: inline;}
6.5 隱藏元素
將display屬性設定為none值就是告訴瀏覽器不要為元素建立任何類型的盒子，也就是說元素沒有後代元素。這時元素在頁面配置中不佔據任何空間。
7. 建立浮動盒
可以使用 float 屬性建立浮動盒，浮動盒會將元素的左邊界或者右邊界移動到包含塊或另一個浮動盒的邊界。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Example</title> <style type="text/css"> p.toggle { float: left; border: medium double green; width: 40%; margin: 2px; padding: 2px; } </style></head><body><p class="toggle"> 15歲的時候再得到那個5歲的時候熱愛的布娃娃，65歲的時候終於有錢買25歲的時候熱愛的那條裙子，又有什麼意義。 什麼都可以從頭再來，只有青春不能。那麼多事情，跟青春綁在一起就是美好，離開青春，就是傻冒。 </p><p> 你的特別不是因為你在創業，不是因為你進了牛企，不是因為你的牛offer，而是因為你就是你，堅信自己的特別，堅信自己的內心，勇敢做自己。 IT DOESN'T MATTER WHERE YOU ARE, IT MATTERS WHO YOU ARE. </p><button>Left</button><button>Right</button><button>None</button><script> var buttons = document.getElementsByTagName("button"); for (var i = 0; i <buttons.length; i++){ buttons[i].onclick = function(e){ var elements = document.getElementsByClassName("toggle"); for(var j = 0; j < elements.length; j++){ elements[j].style.cssFloat = e.target.innerHTML; } } } </script></body></html>
阻止浮動元素堆疊
如果設定了多個浮動元素，預設情況下，它們會一個挨著一個的堆疊在一起。使用clear屬性可以阻止出現這種情況。clear屬性可以指定浮動元素的一個編輯或者兩個編輯不能挨著另一個浮動元素。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Example</title> <style type="text/css"> p.toggle { float: left; border: medium double green; width: 40%; margin: 2px; padding: 2px; } p.clear {clear: left;} </style></head><body><p class="toggle"> 15歲的時候再得到那個5歲的時候熱愛的布娃娃，65歲的時候終於有錢買25歲的時候熱愛的那條裙子，又有什麼意義。 </p><p class="toggle clear"> 什麼都可以從頭再來，只有青春不能。那麼多事情，跟青春綁在一起就是美好，離開青春，就是傻冒。 </p><p> 你的特別不是因為你在創業，不是因為你進了牛企，不是因為你的牛offer，而是因為你就是你，堅信自己的特別，堅信自己的內心，勇敢做自己。 IT DOESN'T MATTER WHERE YOU ARE, IT MATTERS WHO YOU ARE. </p><button>Left</button><button>Right</button><button>None</button><script> var buttons = document.getElementsByTagName("button"); for (var i = 0; i <buttons.length; i++){ buttons[i].onclick = function(e){ var elements = document.getElementsByClassName("toggle"); for(var j = 0; j < elements.length; j++){ elements[j].style.cssFloat = e.target.innerHTML; } } } </script></body></html>
這裡的程式碼範例是對前一個例子的簡單擴充，只是添加了一個新的樣式，為第二個p元素清除了左邊界的浮動元素。從下面的可以看出這個設定引起了頁面配置的改變。（現在兩個元素都浮動在包含塊的左邊界）
第二個p元素的左邊界不允許挨著另一個浮動元素，因此瀏覽器將這個元素已到了頁面下方。元素的右邊界沒有清楚，也就是說如果將兩個p元素的float屬性設定為right，它們在頁面上還是會挨著。
以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
