其實，CSS就三個大模組： 盒子模型 、 浮動 、 定位，其餘的都是細節。要求這三部分，無論如何也要學的非常精通。

所謂盒子模型就是把HTML頁面中的元素看作是一個矩形的盒子，也就是一個盛裝內容的容器。每個矩形都由元素的內容、內邊距（padding）、邊框（border）和外邊距（margin）組成。

盒子模型（Box Model）

所有的文件元素（標籤）都會生成一個矩形框，我們成為元素框（element box），它描述了一個文件元素在網頁佈局彙總所佔的位置大小。因此，每個盒子除了有自己大小和位置外，還影響著其他盒子的大小和位置。

盒子邊框（border）

語法：

border : border-width || border-style || border-color 
 

邊框屬性—設定邊框樣式（border-style）

邊框樣式用於定義頁面中邊框的風格，常用屬性值如下：

none：沒有邊框即忽略所有邊框的寬度（預設值）
​
solid：邊框為單實線(最為常用的)
​
dashed：邊框為虛線 
​
dotted：邊框為點線
​
double：邊框為雙實線

<style> div{ /*盒子寬高*/ width:300px; height:200px; /*邊框粗細*/ /*border-width:2.5px;*/ /*邊框顏色*/ /*border-color:#ffc0cb;*/ /*實線邊框*/ /*border-style:solid;*/ /*點線邊框*/ /*border-style:dotted;*/ /*虛線邊框*/ /*border-style:dashed;*/ /*邊框簡寫*/ border:2pxsolidpink; /*設定上邊框為藍色，其餘為粉色利用層疊性*/ border-top:2pxsolidskyblue; /*設定下邊框為虛線*/ border-bottom:2pxdashedpink;
} </style>

盒子邊框寫法總結表

設定內容	樣式屬性	常用屬性值
上邊框	border-top-style:樣式; border-top-width:寬度;border-top-color:顏色;border-top:寬度 樣式 顏色;
下邊框	border-bottom-style:樣式;border- bottom-width:寬度;border- bottom-color:顏色;border-bottom:寬度 樣式 顏色;
左邊框	border-left-style:樣式; border-left-width:寬度;border-left-color:顏色;border-left:寬度 樣式 顏色;
右邊框	border-right-style:樣式;border-right-width:寬度;border-right-color:顏色;border-right:寬度 樣式 顏色;
樣式綜合設定	border-style:上邊 [右邊 下邊 左邊];	none無（預設）、solid單實線、dashed虛線、dotted點線、double雙實線
寬度綜合設定	border-width:上邊 [右邊 下邊 左邊];	畫素值
顏色綜合設定	border-color:上邊 [右邊 下邊 左邊];	顏色值、#十六進位制、rgb(r,g,b)、rgb(r%,g%,b%)
邊框綜合設定	border:四邊寬度 四邊樣式 四邊顏色;

表格的細線邊框

以前學過的html表格邊框很粗，這裡只需要CSS一句話就可以美觀起來。

table{ border-collapse:collapse; } collapse 單詞是合併的意思

border-collapse:collapse; 表示邊框合併在一起。

圓角邊框(CSS3)

語法格式：

border-radius: 左上角  右上角  右下角  左下角;

<style> .yuan-xing{ width:200px; height:200px; pink; /*設定半徑為20的圓弧*/ /*border-radius:20px;*/ /*設定半徑為100的圓弧(圓)*/ /*border-radius:100px;*/ /*半徑為高度和寬度的一半*/ border-radius:50%; }
.juxing{ width:300px; height:100px; pink; /*半徑為高度的一半*/ border-radius:50px; /*橢圓*/ /*border-radius:50%;*/ }
.butong{ width:200px; height:200px; pink; /*兩個值的圓角*/ /*border-radius:20px40px;*/ /*三個值的圓角*/ /*border-radius:10px30px60px;*/ /*四個值的圓角*/ /*border-radius:10px30px60px80px;*/ /*一個圓角*/ border-top-left-radius:20px; } </style>

內邊距（padding）

padding屬性用於設定內邊距。 是指 邊框與內容之間的距離。

padding-top:上內邊距

padding-right:右內邊距

padding-bottom:下內邊距

padding-left:左內邊距

注意： 後面跟幾個數值表示的意思是不一樣的。

值的個數	表達意思
1個值	padding：上下左右邊距 比如padding: 3px; 表示上下左右都是3畫素
2個值	padding: 上下邊距 左右邊距 比如 padding: 3px 5px; 表示 上下3畫素 左右 5畫素
3個值	padding：上邊距 左右邊距 下邊距 比如 padding: 3px 5px 10px; 表示 上是3畫素 左右是5畫素 下是10畫素
4個值	padding:上內邊距 右內邊距 下內邊距 左內邊距 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 順時針

案例：

<style> .nav{
border-top:3pxsolid#ff8500; border-bottom:1pxsolid#edeef0; height:41px; #fcfcfc; }
.nava{ display:inline-block; text-decoration:none; font-size:12px; color:#4c4c4c; line-height:41px; padding:010px; }
.nava:hover{ #f1f1f1; color:#ff8500; } </style>

外邊距（margin）

margin屬性用於設定外邊距。 設定外邊距會在元素之間建立“空白”， 這段空白通常不能放置其他內容。

margin-top:上外邊距

margin-right:右外邊距

margin-bottom:下外邊距

margin-left:上外邊距

margin:上外邊距 右外邊距 下外邊距 左外邊

取值順序跟內邊距相同。

外邊距實現盒子居中

可以讓一個盒子實現水平居中，需要滿足一下兩個條件：

1. 必須是塊級元素。

2. 盒子必須指定了寬度（width）

然後就給左右的外邊距都設定為auto，就可使塊級元素水平居中。

實際工作中常用這種方式進行網頁佈局，示例程式碼如下：

.header{ width:960px; margin:0 auto;}

文字盒子居中圖片和背景區別

1. 文字水平居中是 text-align: center

2. 盒子水平居中 左右margin 改為 auto

text-align: center; /*  文字居中水平 */
margin: 10px auto; /* 盒子水平居中  左右margin 改為 auto 就闊以了 */

3. 插入圖片 我們用的最多 比如產品展示類

4. 背景圖片我們一般用於小圖示背景 或者 超大背景圖片

section img {
width: 200px;/* 插入圖片更改大小 width 和 height */
height: 210px;
margin-top: 30px; /* 插入圖片更改位置 可以用margin 或padding 盒模型 */
margin-left: 50px; /* 插入當圖片也是一個盒子 */
}

aside {
width: 400px;
height: 400px;
border: 1px solid purple;
background: #fff url(images/sun.jpg) no-repeat;

background-size: 200px 210px; /* 背景圖片更改大小隻能用 background-size */
background-position: 30px 50px; /* 背景圖片更該位置 用 background-position */
}

清除元素的預設內外邊距

為了更方便地控制網頁中的元素，製作網頁時，可使用如下程式碼清除元素的預設內外邊距：

* {
  padding:0;     /* 清除內邊距 */
  margin:0;     /* 清除外邊距 */
}

注意： 行內元素是隻有左右外邊距的，是沒有上下外邊距的。 內邊距，在ie6等低版本瀏覽器也會有問題。

我們儘量不要給行內元素指定上下的內外邊距就好了。

content寬度和高度

使用寬度屬性width和高度屬性height可以對盒子的大小進行控制。

width和height的屬性值可以為不同單位的數值或相對於父元素的百分比%，實際工作中最常用的是畫素值。

大多數瀏覽器，如Firefox、IE6及以上版本都採用了W3C規範，符合CSS規範的盒子模型的總寬度和總高度的計算原則是：

  /*外盒尺寸計算（元素空間尺寸）*/
  Element空間高度 = content height + padding + border + margin
  Element 空間寬度 = content width + padding + border + margin
  /*內盒尺寸計算（元素實際大小）*/
  Element Height = content height + padding + border （Height為內容高度）
  Element Width = content width + padding + border （Width為內容寬度）

注意：

1、寬度屬性width和高度屬性height僅適用於塊級元素，對行內元素無效（ img 標籤和 input除外）。

2、計算盒子模型的總高度時，還應考慮上下兩個盒子垂直外邊距合併的情況。

3、如果一個盒子沒有給定寬度/高度或者繼承父親的寬度/高度，則padding 不會影響本盒子大小。

盒子模型佈局穩定性

建議 優先使用 寬度 （width） 其次 使用內邊距（padding） 再次 外邊距（margin）。

  width >  padding  >  margin  

原因：

1. margin 會有外邊距合併 還有 ie6下面margin 加倍的bug（討厭）所以最後使用。

2. padding 會影響盒子大小， 需要進行加減計算（麻煩） 其次使用。

3. width 沒有問題（嗨皮）我們經常使用寬度剩餘法 高度剩餘法來做。

CSS3盒模型

CSS3中可以通過box-sizing 來指定盒模型，即可指定為content-box、border-box，這樣我們計算盒子大小的方式就發生了改變。

可以分成兩種情況：

1、box-sizing: content-box 盒子大小為 width + padding + border content-box:此值為其預設值，也就是傳統盒模型，其讓元素維持W3C的標準Box Mode

2、box-sizing: border-box 盒子大小為 width 就是說 padding 和 border 是包含到width裡面的

移動端可以全部使用除CSS3盒子模型，PC端如果完全需要相容，就用傳統模式，如果不考慮相容性，就選擇CSS3盒模型

盒子陰影

語法格式：

box-shadow:水平陰影 垂直陰影 模糊距離 陰影尺寸 陰影顏色  內/外陰影；

1. 前兩個屬性是必須寫的。其餘的可以省略。

2. 外陰影 (outset) 但是不能寫 預設值

div {
width: 200px;
height: 200px;
border: 10px solid red;
/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4); */
/* box-shadow:水平位置 垂直位置 模糊距離 陰影尺寸（影子大小） 陰影顏色 內/外陰影； */
box-shadow: 0 15px 30px rgba(0, 0, 0, .4);

}