Web前端开发笔记——第三章 CSS语言 第五节 盒子模型
目錄
- 一、CSS布局與定位
- 二、盒子模型
- 三、盒子模型的組成
- 四、設置邊框的屬性
- 五、設置外、內邊距的屬性
- 六、overflow 屬性
- 結語
一、CSS布局與定位
在CSS中對一個網頁進行布局與定位，首先通過盒子模型，即頁面元素的大小、邊框、各元素之間的間距將布局進行設計元素，然后通過定位，即文檔流、浮動定位、層定位來決定盒子模型的位置，且盒子是可以嵌套的。
二、盒子模型
簡單的來說盒子模型它可以是一個區域、圖片、列表、導航欄等等，都可以稱作盒子，即HTML元素都可以稱作為盒子。
可以通過下圖來簡單了解一下盒子模型，以下是一個網頁頁面當按下F12后的html源碼，我們可以看到布局中的盒模型：
三、盒子模型的組成
盒子模型以四個部分組成，可以以幾個不同大小的矩形內嵌為例，從外到內依次分別是外邊距（Margin）、邊框（Border）、內邊距（Padding，也可以叫做填充）、內容（Content），其中內容的空間由height屬性和width屬性設定。
例如，下列代碼，設置一個div區域，設置內容的空間寬度為250px、高度為200px，邊框大小為20px，且為實體天藍色，內邊距大小為20px，外邊距大小為20px：
css代碼：
html代碼：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="../CSS/new_file.css" /></head><body><div>內容</div></body></html>運行結果如下：
我們可以發現其實該盒子模型的實際寬度（高度）=內容寬度（高度）+兩邊內邊距（padding）+兩邊邊框（border）+兩邊外邊距（margin）。
例如上圖的：
該盒子模型的實際寬度=內容寬度（width：250px）+兩邊內邊距（左側內邊距padding-left：20px+右側內邊距padding-right：20px）+兩邊邊框（左邊框border-left：20px+右邊框border-right：20px）+兩邊外邊距（左側外邊距padding-left：20px+右側外邊距padding-right：20px）=370px；
該盒子模型的實際高度=內容高度（height：200px）+兩邊內邊距（上側內邊距padding-top：20px+下側內邊距padding-bottom：20px）+兩邊邊框（上邊框border-top：20px+下邊框border-bottom：20px）+兩邊外邊距（上側外邊距padding-top：20px+下側外邊距padding-bottom：20px）=320px。
四、設置邊框的屬性
通過對border屬性進行設置，可以改變邊框的大小、顏色等等。
border-width:屬性設置邊框的寬度，后跟像素px或thick（粗）、medium（中，即默認值）、thin（細）。
border-style:屬性設置邊框的樣式，它默認值是none，后跟solid時表示實線邊框；后跟dashed時表示虛線邊框；后跟dotted時表示點線邊框；后跟double時表示定義兩個邊框，其中兩個邊框的寬度取值取決于border-width的值；后跟inset或outset屬性，表示設置3D嵌入或3D突出邊框，其取決于border-color邊框的顏色；后跟ridge或groove，表示設置3D脊邊框或3D槽邊框，其也是取決于border-color邊框的顏色。
border-color:屬性設置邊框的顏色，這里要注意如果只設置border-color:改變邊框顏色是不起作用的，前提是要設置了border-style:邊框樣式。
也可以直接通過border:屬性在一個屬性中設置邊框的屬性，即同時設置border-width屬性、border-style屬性和border-color屬性，例如：border: 2px dashed red;
例如，下列代碼，設置盒子模型的邊框屬性為虛線紅色且寬度為2px：
css代碼：
html代碼：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="../CSS/new_file.css" /></head><body><div id="first"><p>計算機（computer）俗稱電腦，是現代一種用于高速計算的電子計算機器。</p></div></body></html>運行結果如下：
且也可以在css中附加以下代碼，對邊框的上邊框、下邊框或左右邊框進行設置，即單獨設置各邊屬性。如下，設置邊框的上邊框、下邊框為2px，且為實體藍色：
運行結果如下：
五、設置外、內邊距的屬性
可以通過不同方向（top、bottom、right、left）來設置外、內邊距不同面的邊距，在設置margin屬性值時，依次是按top、bottom、right、left的順序來設置的，也可以設置三個值，中間的值是左右邊距，左右即是上邊距和下邊距；可以設置兩個值，即表示上下邊距、左右邊距。
#first {width: 150px;height: 200px;border: 2px dashed red;padding: 20px;margin: 20px 10px 20px 15px; }當有兩個盒子模型合并時，margin屬性垂直方向合并（即垂直方向像素大的即為合并結果），而水平方向不合并。且當設置div區域，若想讓該區域水平居中，可設置margin屬性margin:0 auto使該區域達到效果。
例如，下列代碼：
css代碼：
html代碼：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="../CSS/new_file.css" /></head><body><div id="first"><img src="../image/mountain.jpg"><img src="../image/酒柜.png"></div></body></html>運行結果如下：
六、overflow 屬性
當盒子模型的內容溢出盒子時，通過overflow 屬性可以設置處理方式，它分為以下五種：
當 overflow: visible時，溢出內容會顯示在盒子模型以外，這也是默認情況，即不設置overflow 屬性時的默認值。
當 overflow: hidden時，溢出內容會被修剪，即內容被修剪掉。
當 overflow: auto時，如果內容被修剪，溢出內容會以滾動條的方式來查看溢出的內容。
當 overflow: scroll時，溢出內容會以滾動條的方式來查看溢出的內容，若內容沒有溢出，滾動條仍然可見，但無法滾動，即它是始終顯示滾動條的。
當 overflow: inherit時，繼承父元素overflow屬性的值。
例如，下列代碼，設置盒子模型的屬性overflow: visible，使溢出內容顯示在模型以外：
css代碼：
html代碼：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="../CSS/new_file.css" /></head><body><div><p>計算機（computer）俗稱電腦，是現代一種用于高速計算的電子計算機器，可以進行數值計算，又可以進行邏輯計算，還具有存儲記憶功能。是能夠按照程序運行，自動、高速處理海量數據的現代化智能電子設備。</p></div></body></html>運行結果如下，可以看到內容是溢出的：
要區分當overflow: auto屬性和overflow: scroll屬性的不同情況，overflow: scroll屬性的滾動條是始終顯示的，與內容無關。
例如下列代碼，可以看出auto屬性和scroll屬性的區別：
css代碼：
html代碼：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="../CSS/new_file.css" /></head><body><div id="first"><p>計算機（computer）俗稱電腦，是現代一種用于高速計算的電子計算機器。</p></div><br /><div id="second"><p>由硬件系統和軟件系統所組成，沒有安裝任何軟件的計算機稱為裸機。可分為超級計算機、工業控制計算機、網絡計算機、個人計算機、嵌入式計算機五類，較先進的計算機有生物計算機、光子計算機、量子計算機等。</p></div></body></html>運行結果如下，我們發現區域first的內容并未溢出，也顯示了滾動條，但滾動條不能使用；區域second的內容溢出，通過設置auto屬性，可以支持滾動查看修剪內容。：
結語
以上就是全部內容，篇幅較長，感謝您的閱讀和支持，若有表述或代碼中有不當之處，望指出！您的指出和建議能給作者帶來很大的動力！！！
總結
以上是生活随笔為你收集整理的Web前端开发笔记——第三章 CSS语言 第五节 盒子模型的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Web前端开发笔记——第三章 CSS语言
- 下一篇： Web前端开发笔记——第三章 CSS语言