如何組建CSS盒模型

這篇文章主要為大家展示了“如何組建CSS盒模型”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“如何組建CSS盒模型”這篇文章吧。

W3C組織建議把所有網頁上的對象都放在一個盒(box)中，設計師可以通過創建定義來控制這個盒的屬性，這些對象包括段落、列表、標題、圖片以及層。

盒模型主要定義四個區域MBPC：邊界(margin) 、邊框(border) 、填充(padding)和內容(content) 。

CSS盒模型設置

CSS盒模型涉及到邊界[margin]、邊框[border]、填充[padding]三個關鍵概念

（1）邊界[margin]

Margin：頂（margin-top）、右（margin-right）、底（margin-bottom）、左（margin-left）--四個邊距按順時針方向排列

基本語法：

margin-top：長度單位 | 百分比單位 | auto

margin:20px 40px 60px 80px;/* 上|右|下|左*/

margin:20px 40px 60px;/* 上|右左|下*/

margin:20px 40px; /* 上下|左右*/

margin:20px; /* 上右下左均相同*/

（2）邊框[border]

border-width: thin、medium、thick 、length ；復合屬性，分top、right、bottom、left四個子屬性；

border-style :none|dotted|dashed| solid|double|groove[凹型線］|ridge ［凸型線］ |inset ［嵌入線］ |outset ［嵌出線］;

border-color: 顏色關鍵字 | RGB值 ;

Border:邊框粗細 邊框樣式 邊框顏色;

（3）填充[padding]

元素內邊界主要是指邊框和內部元素之間的空白距離，利用padding屬性設置元素內的邊界時，也包括5個屬性，同樣也有四種設置方法。

基本語法：

padding:長度 | 百分比

padding-top、padding-right、padding-bottom:同上

padding:20px 30px 40px 60px;/**/

padding:20px 30px 40px; /* 上|右|下|左*/

padding:20px 30px; /* 上|左右|下*/

padding:20px; /* 上右下左均相同*/

以上是“如何組建CSS盒模型”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！