CSS盒子模型是什麼意思？

CSS盒子模型都具備內容content、內邊距padding、邊框border、外邊距margin這些屬性，這些屬性可以用日常生活中的常見事物「盒子」作一個比喻來理解，所以稱作為盒子模型。

CSS （Cascading Style Sheet）可翻譯為“層疊樣式表”或“級聯樣式表”，它定義如何顯示HTML 元素，用於控制Web頁面的外觀。透過使用CSS實現頁面的內容與表現形式分離，大大提高了工作效率。 CSS 假定所有的HTML 文件元素都產生了一個描述該元素在HTML文件佈局中所佔空間的矩形元素框，可以形像地將其視為一個盒子。 CSS 圍繞著這些盒子產生了一種「盒子模型」概念，透過定義一系列與盒子相關的屬性，可以大大豐富和促進各個盒子乃至整個HTML文件的表現效果和佈局結構。對於是盒子的元素，如果沒有特殊設置，其預設總是佔獨立的一行，寬度為瀏覽器視窗的寬度，在其前後的元素不管是不是盒子，都只能排列在它的上面或者下面，即上下累加排列。 HTML文件中的每個盒子都可以看成是由從內到外的四個部分構成，即內容區（content）、填充(padding)、邊框(border)和空白邊(margin)。 CSS 為四個部分定義了一系列相關屬性，透過這些屬性的設定可以豐富盒子的表現效果。

影片教學推薦：《CSS教學集合-PHP中文網》

盒子模型組成

內容區（content）

內容區是盒子模型的中心，它呈現了盒子的主要訊息內容，這些內容可以是文字、圖片等多種類型。內容區有三個屬性，width、height 和overflow。使用width和height屬性可以指定盒子內容區的高度和寬度，當內容資訊太多，超出內容區所佔範圍時，可以使用overflow 溢位屬性來指定處理方法。當overflow 屬性值為hidden時，溢出部分將不可見；為visible時，溢出的內容資訊可見，只是被呈現在盒子的外部；當為scroll時，滾動條將被自動添加到盒子中，用戶可以透過拉動捲軸顯示內容資訊；當為auto時，將由瀏覽器決定如何處理溢位部分。

填滿（padding）

填滿是內容區和邊框之間的空間。填滿的屬性有五種 ，即padding -top、padding -bottom、padding -left、padding-right 以及綜合了以上四種方向的快速填充屬性padding。使用這五種屬性可以指定內容區資訊內容與各方向邊框間的距離。設定盒子背景色屬性時，可使背景色延伸至填滿區域。

邊框（border）

邊框是環繞內容區和填滿的邊界。邊框的屬性有border-style、border-width和border-color 以及綜合了以上三類屬性的快速邊框屬性 border。 border-style 屬性是邊框最重要的屬性，如果沒有指定邊框樣式，其他的邊框屬性都會被忽略，邊框將不存在。 CSS規定了dotted（點線）、dashed（虛線）、solid(實線)等九種邊框樣式。使用border-width屬性可以指定邊框的寬度，其屬性值可以是長度計量值，也可以是CSS規定的thin、medium 和thick。使用border-color屬性可以為邊框指定對應的顏色，其屬性值可以是RGB值，也可以是CSS 規定的17個顏色名稱 。在設定以上三種邊框屬性時，既可以進行邊框四個方向整體的快捷設置，也可以進行四個方向的專向設置，如border: 2px solid green 或border-top-style: solid、border- left-color: red等。設定盒子背景色屬性時，在IE中背景不會延伸到邊框區域，但在FF等標準瀏覽器中，背景顏色可以延伸到邊框區域，特別是單邊框設定為點線或虛線時能看到效果。

空白邊（margin）

空白邊位於盒子的最外圍，是增加在邊框外周圍的空間。空白邊使盒子之間不會緊密地連接在一起，是CSS 佈局的一個重要手段。空白邊的屬性有五種 ，即margin-top、margin-bottom、margin- left、margin-right以及綜合了以上四種方向的快捷空白邊屬性margin，其具體的設定和使用與填充屬性類似。對於兩個相鄰的（水平或垂直方向 ）且設置有空白邊值的盒子，他們鄰近部分的空白邊將不是二者空白邊的相加，而是二者的並集。若二者鄰近的空白邊值大小不等，則取二者中較大的值。同時，CSS 容許給空白邊屬性指定負數值，當指定負空白邊值時，整個盒子將向指定負值方向的相反方向移動，以此可以產生盒子的重疊效果。採用指定空白邊正負值的方法可以移動網頁中的元素，這是CSS 佈局技術中的重要方法。

推薦教學：《CSS教學》

以上是CSS盒子模型是什麼意思？的詳細內容。更多資訊請關注PHP中文網其他相關文章！