希望可以在CSDN與大家一起成長，如有錯誤請大家多多批評指教！
CSS 英文全稱為Cascading Style Sheet，中文譯為“層疊樣式表”。CSS以 HTML為基礎，提供了豐富的功能，如字型、顔色、背景的控制及整體排版等，而且可以針對不同的浏覽器設定不同的樣式。在CSS與CSS3基礎知識（三）(點選可複習)中學習了盒子模型的邊框屬性，現在一起學習盒子模型内外邊距以及陰影屬性吧！
1.内邊距屬性
在網頁設計中，為了調整内容在盒子中的顯示位置，常常需要給标簽設定内邊距，所謂内邊距是名額簽内容與邊框之間的距離，也稱内填充，内填充不會影響标簽内容的大小。在CSS中padding屬性用于設定内邊距，同邊框屬性border一樣，padding 也是一個複合屬性，其相關設定方法如下:
- padding-top:上内邊距;
- padding-right:右内邊距;
- padding-bottom:下内邊距;
- padding-lef:左内邊距;
- padding:上内邊距 [ 右内邊距 下内邊距 左内邊距 ]
同邊框相關屬性一樣，使用padding屬性定義内邊距時，必須按順時針順序采用值複制，一個值為四邊、兩個值為上下/左右，三個值為上/左右/下。
舉個栗子：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>内邊距</title>
<style type="text/css">
.one {border:5px solid #d43b1f; } /*為圖像和段落設定邊框*/
img {
padding: 20px 20px 0px 20px;/*圖像内邊距上為20px、右為20px、下為0px、左為20px*/
width: 300px;
height:350px;
}
p{ padding:5%; } /*段落的内邊距為父标簽寬度的5号*/
</style>
</head>
<body>
<img class="one" src="image/flower.JPG" alt="小紅花"/>
<p class="one">小紅花是我在下課回宿舍路上撿滴</p>
<div></div></body>
</body>
</html>
**由于段落的内邊距設定為了%數值，當拖動浏覽器視窗改變其寬度時，段落的内邊距會随之發生變化(此時<p>标簽的父标簽為<body> )。
**如果設定内外邊距為百分比，則不論上下或左右的内外邊距，都是相對于父标簽寬度width的百分比，伴随父标簽width的變化而變化，和高度height 無關。
2.外邊距屬性
網頁是由多個盒子排列而成的，要想拉開盒子與盒子之間的距離，合理地布局網頁，就需要為盒子設定外邊距。所謂外邊距是名額簽邊框與相鄰标簽之間的距離。在CSS中margin屬性用于設定外邊距，它是一個複合屬性，與内邊距padding的用法類似，設定外邊距的方法如下。
- margin-top: 上外邊距;
- margin-right: 右外邊距;
- margin-bottom: 下外邊距;
- margin-left: 左外邊距;
- margin: 上外邊距 [ 右外邊距 下外邊距 左外邊距 ];
margin相關屬性的值，以及複合屬性margin取1~4個值的情況與padding相同。但是外邊距可以使用負值，使相鄰标簽發生重疊。當對塊級元素應用寬度屬性width,并将左右的外邊距都設定為auto,可使塊級元素水準居中，實際工作中常用這種方式進行網頁布局，示例代碼如下:
p{ margin:0 auto; }
下面舉個栗子示範外邊距的用法和效果。建立HTML頁面，在頁面中添加一個圖像和一個段落，然後使用marargin相關屬性，對圖像和段落進行排版。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>外邊距</title>
<style type="text/css">
/**{
margin:0;
padding:0;
}加上這句就可以删除浏覽器預設值，但不建議使用。*/
img {
width: 200px;
border: 5px solid #09C;
float: left; /*設定圖像左浮動*/
margin-right: 50px; /*設定圖像的右外邊距*/
margin-left: 30px; /*設定 圖像的左外邊距*/
/*上面兩行代碼等價于margin:0 50px0 30px; */
}
p{text-indent: 2em; } /*段落文本首行縮進2字元*/
</style>
</head>
<body>
<img class="one" src="image/flower.JPG" alt="小紅花"/>
<p class="one">小紅花是我在下課回宿舍路上撿滴，回到宿舍我就把它放進小本本裡面了，做一個标本！</p>
<div></div></body>
</body>
</html>
3.box-shadow屬性
在網頁制作中，經常需要對盒子添加陰影效果。使用CSS3中的box—shadow屬性可以輕松實作陰影的添加，其基本文法格式如下:
box-shadow: h-shadow v-shadow blur spread color outset;
在上面的文法格式中，box-shadow屬性共包含6個參數值，如表所示。
**其中h-shadow和v-shadow為必選參數值，不可以省略，其餘為可選參數值。其中，“陰影類型”預設outset更改為inset後,陰影類型變為内陰影。
舉個栗子：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>陰影屬性</title>
<style type="text/css">
.one{
width: 200px;
padding: 20px;
/*内邊距20px*/
border-radius: 50%;
/*将圖像設定為圓形效果*/
border: 1px solid #666;
box-shadow: 5px 5px 10px 2px #999 inset;
}
.two{
width: 200px;
padding: 20px;
/*内邊距20px*/
border-radius: 50%;
/*将圖像設定為圓形效果*/
border: 1px solid #666;
box-shadow: 5px 5px 10px 2px #999 ;
}
</style>
</head>
<body>
<img class="one" src="image/flower.JPG" alt="小紅花"/>
<img class="two" src="image/flower.JPG" alt="小紅花"/>
<div></div></body>
</body>
</html>
**第11行代碼給圖像添加了内陰影樣式。使用内陰影時須配合内邊距屬性padding，讓圖像和陰影之間拉開一定的距離，不然圖檔會将内陰影遮擋。
**同text- -shadow屬性(文字陰影屬性)一樣，box-shadow屬性也可以改變陰影的投射方向以及添加多重陰影效果，示例代碼如下:
box-shadow:5px 5px 10px 2px #999 inset,-5px -5px 10px 2px #73AFEC inset;
4.box-sizing屬性
當一個盒子的總寬度确定之後,要想給盒子添加邊框或内邊距,往往需要更改width屬性值，才能保證盒子總寬度不變。但是這樣的操作煩瑣且容易出錯，運用CSS3的box-sizing 屬性可以輕松解決這個問題。box-sizing屬性用于定義盒子的寬度值和高度值是否包含内邊距和邊框,其
基本文法格式如下: box-sizing: content-box/border-box;
●content-box :浏覽器對盒子模型的解釋遵從W3C标準，當定義width和height時，它的參數值不包括border和padding。
●border-box:當定義width和height時,border和padding的參數值被包含在width和height之内。
下面舉個栗子來示範box-sizing 屬性的用法：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>box-sizing</title>
<style type="text/css">
.box1 {
width: 300px;
height: 100px;
background: gray;
border: 10px solid blue;
box-sizing: content-box;
}
.box2 {
width: 300px;
height: 100px;
background: gray;
border: 10px solid blue;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box1">content-box屬性</div>
<div class="box2">border-box屬性</div>
</body>
</body>
</html>