盒模型

定義

盒模型是css佈局的基石，它規定了網頁元素如何顯示以及元素間相互關係。css定義全部的元素均可以擁有像盒子同樣的外形和平面空間，即都包含邊框、邊界、補白、內容區，這就是盒模型。

 

padding的使用方法

定義：

    padding,在大盒子角度，設定頁面中一個元素內容到元素的邊緣(邊框) 之間的距離， 也稱補白。

 

用法：

    一、用來調整內容在容器中的位置關係

    二、用來調整子元素在父元素中的位置關係。

        注：padding屬性須要添加在父元素上。

    三、padding值是額外加在元素原有大小之上的，如想保證元素大小不變，需從元素寬或高上減掉後添加的padding屬性值

 

屬性值的4種方式：

四個值：上 右 下 左 {padding:0px 0px 0px 40px;}

三個值：上 左右 下 {padding:10px 20px 30px ;}

二個值：上下 左右 {padding:10px 20px ;}

一個值：四個方向 padding:2px;/*定義元素四周填充爲2px*/

    說明：可單獨設置一方向填充，如：上方向padding-top:10px; 右方向padding-right:10px; 下方向padding-bottom:10px; 左方向padding-left:10px;

 

margin的使用方法

定義：

    margin,在小盒子角度，在元素外邊的空白區域，被稱爲邊距。

 

用法：

        一、不用減margin值

        二、margin：0，auto

                在一個有寬高的元素中，能夠讓盒子在瀏覽器中橫向居中

 

屬性值的4種方式：

四個值：上 右 下 左

三個值：上 左右 下

二個值：上下 左右

一個值：四個方向 margin:2px;

margin:0 auto 一個有寬度的元素在瀏覽器中橫向居中。

說明：可單獨設置一方向邊界，如：margin-top:10px;

 

盒子模型的實際大小

寬 = 左右margin+左右border+左右padding+width，

高 = 上下margin+上下border+上下padding+height，