如何組建CSS盒模型

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

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

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

CSS盒模型設(shè)置

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

（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 ；復(fù)合屬性，分top、right、bottom、left四個子屬性；

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

border-color: 顏色關(guān)鍵字 | RGB值 ;

Border:邊框粗細(xì) 邊框樣式 邊框顏色;

（3）填充[padding]

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

基本語法：

padding:長度 | 百分比

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

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

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

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

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

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