其實，css就三個大模組： 盒子模型 、 浮動 、 定位，其餘的都是細節。要求這三部分，無論如何也要學的非常精通。
所謂盒子模型就是把html頁面中的元素看作是乙個矩形的盒子，也就是乙個盛裝內容的容器。每個矩形都由元素的內容、內邊距（padding）、邊框（border）和外邊距（margin）組成。
border-top-style:樣式; border-top-width:寬度; border-top-color:顏色;
border-top:寬度 樣式 顏色;
樣式綜合設定 border-style:上邊 [右邊 下邊 左邊]; none無（預設）、solid單實線、dashed虛線、dotted點線、double雙實線
寬度綜合設定 border-width:上邊 [右邊 下邊 左邊]; 畫素值
顏色綜合設定 | border-color:上邊 [右邊 下邊 左邊]; 顏色值、#十六進製制、rgb(r,g,b)
border-collapse:collapse; 表示邊框合併在一起。
border-radius: 左上角 右上角 右下角 左下角;
border-radius: 10px; 4個角都是相同的 10px 的弧度
border-radius: 50%; 變成乙個圓形
border-radius: 10px 40px; 左上角和右下角是10px 右上角和左下角40px （13,24）
border-radius: 10px 40px 80px; 左上角10 右上角和左下角 40 右下角80 （1,24,3）
是指邊框與內容之間的距離。f12除錯工具，青色的是內間距。
padding: 上 右 下 左 （順時針）
padding: 3px 5px; 上下3畫素 左右5畫素 （13,24）
padding: 3px 5px 10px; 上是3畫素 左右是5畫素 下是10畫素（1,24,3）
margin屬性用於設定外邊距。 設定外邊距會在元素之間建立「空白」， 這段空白通常不能放置其他內容。
可以讓乙個盒子實現水平居中，需要滿足一下兩個條件：
必須是塊級元素。
盒子必須指定了寬度（width）
然後就給左右的外邊距都設定為auto，就可使塊級元素水平居中。
實際工作中常用這種方式進行網頁布局，示例**如下：
.header
text-align: center; 文字居中水平
背景更改大小只能用background-size，更改位置用background-position
一般情況下，背景適合做一些小圖示使用。產品展示之類的就用插入
為了更方便地控制網頁中的元素，製作網頁時，可使用如下**清除元素的缺省內外邊距：
* 注意： 行內元素是只有左右內外邊距的，是沒有上下內外邊距的。 盡量不要給行內元素指定上下的內外邊距。
實際工作中，可以把 * 換成div,dl,dt,dd,ul,ol,h1,input等等
使用margin定義塊元素的垂直外邊距時，可能會出現外邊距的合併。
當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top，則他們之間的垂直間距不是margin-bottom與margin-top之和，而是兩者中的較大者。這種現象被稱為相鄰塊元素垂直外邊距的合併（也稱外邊距塌陷）。
解決方案： 避免這樣寫，把需要的外邊距給乙個塊。
對於兩個巢狀關係的塊元素，如果父元素沒有上內邊距及邊框，則父元素的上外邊距會與子元素的上外邊距發生合併，合併後的外邊距為兩者中的較大者。
解決外邊距合併(塌陷)問題：
可以為父元素定義1畫素的上邊框或上內邊距。 border: 1px solid red; 或padding: 1px;
可以為父元素新增overflow:hidden。
盒子的總寬度= width+左右內邊距之和+左右邊框寬度之和+左右外邊距之和
內盒實際寬度尺寸：width+2padding+2border
注意：1、寬度屬性width和高度屬性height僅適用於塊級元素，對行內元素無效（ img 標籤和 input除外）。
2、計算盒子模型的總高度時，還應考慮上下兩個盒子垂直外邊距合併的情況。
只要不給塊級元素寬度，padding就不會影響盒子的寬度
乙個盒子（該塊級元素）繼承父親的寬度，不給該塊級元素寬度，padding也不會影響盒子的寬度
乙個小案例用到的東西（本篇末尾後有此**）：
在實際中一般喲啊加上如下所示：
* 如果四個邊框裡上邊框是特別的樣式，應該放在下面，就近原則。
border: 1px solid #d9e0ee;
border-top: 3px solid #ff8400; /* 這句話要放到 border 的下面 */
寫完乙個盒子可以加背景色看看效果如何
塊級元素就是乙個個的盒子，h3標籤也是乙個盒子
font-weight: normal; /* 讓粗體不變粗，比如標題*/
預設左對齊，margin: 7px 0 0 8px; 設定好上邊，左邊就可以了。右邊和下邊會自動調整。
list-style: none; /* 取消列表自帶的小點 預設的列表樣式 */
text-decoration: underline; /* 新增下劃線 */
color: rgba(255, 255, 255, 0.7);/* 顏色半透明 */
**如下：
gif：小胖墩游泳被卡 被救後一臉無辜
gif：小胖墩游泳被卡 被救後一臉無辜
原因：margin 會有外邊距合併 還有 ie6下面margin 加倍的bug（討厭）所以最後使用。
padding 會影響盒子大小， 需要進行加減計算（麻煩） 其次使用。
width 沒有問題（嗨皮）我們經常使用寬度剩餘法（乙個塊中文字居左，後面的塊緊挨著左邊的塊） 高度剩餘法來做。
css3中可以通過box-sizing來指定盒模型
1、box-sizing: border-box 盒子大小為width，（padding 和 border 是包含到width裡面的）padding和border不會撐開盒子。
2、box-sizing: content-box 盒子大小為 width + padding + border（此值為其預設值，就是以前w3c的標準box mode）
box-shadow:水平位置 垂直位置 模糊距離 陰影尺寸（影子大小） 陰影顏色 內/**影；
前兩個屬性是必須寫的。其餘的可以省略。
預設**影 (outset) 不能寫 想要內陰影用inset
box-shadow:3px 3px 5px 4px rgba(0,0,0,1);
盒子模型（CSS重點）
大致了解盒子模型 把html頁面中的元素看作是乙個矩形的盒子，也就是乙個盛裝內容的容器。每個矩形都是由 元素的內容 內邊距 padding 邊框 border 和外邊距 margin 組成 2.1盒子邊框 border 語法 border border width border style bord...
CSS 盒子模型（重點）
屬性 border width border style border color 簡寫 border 1px solid red 注意 邊框在盒子外部，會影響盒子的大小 合併相鄰邊框 border collapse collapse 內容 可以放文字，也可以放盒子 內邊距 邊框與內容的距離 屬性 ...
css盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...