css之盒模型

盒模型由內容(content)、填充(padding)、邊框(border)、邊界(margin)組成，盒子中主要的屬性就5個：width、height、padding、border、margin。 

下面一一介紹盒子中的區域

width

寬度，CSS中width指的是內容的寬度，而不是盒子的寬度，CSS中height指的是內容的高度，而不是盒子的高度 

width:200px;
height: 200px;
padding:50px;
margin: 50px;
border: 5px solid red;
background-color: green;

上面的程式碼，設定的寬度為200px，那麼內容的寬度則為200px，但是當我們把滑鼠移到盒子上，顯示的寬度為310px,　此寬度為盒子的寬度，真實佔有寬度=  左border  +左padding  +  width  +  右padding  +  右border，如果想要保持一個盒子的真實佔有寬度不變，那麼加width就要減padding。加padding就要減width。

 

例如寫三個402*402的盒子，答案會有無限多種，只有按照上述公式計算組合即可

.box1{width: 400px;height: 400px;border: 1px solid red;}
.box2{width: 200px;height: 200px;border: 6px solid red;padding: 95px;}
.box3{width: 0px;height: 0px;padding: 200px;border: 1px solid red;}
<br /><div class="box1">第1个盒子</div>
<div class="box2">第2个盒子</div>
<div class="box3">第3个盒子</div>

padding

padding就是內邊距。 padding的區域有背景顏色，css2.1前提下，且背景顏色一定和內容區域的相同。也就是說，background-color將填滿所有boder以內的區域。

padding是4個方向的，所以我們能夠分別描述4個方向的padding。方法有兩種，第一種寫小屬性；第二種寫綜合屬性，用空格隔開。

小屬性：這種適合只有一個方向需要設定值的時候採用，不然各個方向都要寫很麻煩。

 padding-top: 30px;padding-right: 20px;padding-bottom: 40px;padding-left: 100px;

綜合屬性：方向為上、右、下、左

/*如果写了四个（表示方向为 上、右、下、左）*/
padding:30px 20px 40px 100px;

/*上、右、下、左（和右一样）*/
padding: 20px 30px 40px;<br />
/*如果写了两个（表示方向为 上、右、下（和上一样）、左（和右一样））*/
padding:30px 20px;

/*如果写了一个（表示方向为所有方向）*/
padding:30px;

一般的用法是：用小屬性層疊大屬性

 padding: 20px; /*各个方向都设置为20*/<br /> padding-left: 30px;/*左边单独设置为30*/

　　

不能把小屬性，寫在大屬性前面

padding-left: 30px;
padding: 20px; /*这样写上边一行已经失去意义了*/

下面考一考你是否真的掌握了？說出下面盒子真實佔有寬高

div{
	width: 200px;
	height: 200px;
	padding: 10px 20px 30px;
　　　　 padding-right: 40px;			
        border: 1px solid #000;
   }

真實佔有寬度 = 200（內容寬） + 20（左填充） + 40（右填充） + 1（左邊框） + 1（右邊框） = 262px

內邊距會影響盒子大小，但是繼承的寬度， padding不會擠開 。

一些元素，預設帶有padding，例如ul標籤，所以，我們為了做站的時候，便於控制，總是喜歡清除這個預設的pad

*{margin: 0;padding: 0;}

*的效率不高，所以我們使用並集選擇器，羅列所有的標籤

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}

border

border就是邊框。邊框有三個要素：粗細、線型、顏色。顏色如果不寫，預設是黑色。另外兩個屬性不寫，顯示不出來邊框。 border在各大瀏覽器中渲染會有細微差別，具體看這篇專門有介紹

border: 1px solid red;

border是一個大綜合屬性，上面程式碼是把4個邊框，都設定為1px寬度、線型實線、red顏色。

border屬性能夠被拆開，有兩大種拆開的方式：

1） 依3要素:

border-width、border-style、border-color

 

border-width:10px;       → 边框宽度
border-style:solid;      → 线型
border-color:red;        → 颜色

如果某一個小要素後面是空格隔開的多個值，那麼就是

上右下左

的順序：

border-width:10px 20px;
border-style:solid dashed dotted;
border-color:red green blue yellow;

2） 依方向：

border-top、border-right、border-bottom、border-left

border-top:10px solid red;
border-right:10px solid red;
border-bottom:10px solid red;
border-left:10px solid red;

按方向還能再拆一層，就是把每個方向的，每個要素拆開，一共

12

條語句：

border-top-width:10px;
border-top-style:solid;
border-top-color:red;<br />
border-right-width:10px;
border-right-style:solid;
border-right-color:red;<br />
border-bottom-width:10px;
border-bottom-style:solid;
border-bottom-color:red;<br />
border-left-width:10px;
border-left-style:solid;
border-left-color:red;

border可以没有

border:none;
/*某一条边没有*/
border-left: none;
/*或者*/
border-left-width: 0;