border:

        1.寬度不支援百分比；thin/medium/thick；

2.solid/dotted/dashed/double/inset/outset/ridge/groove:

            a.  IE下的dotted是小圓，通過新增圖形可以用來實現IE7/IE8下的圓角效果；

            b. 利用double實現三條槓效果

           c. border-color預設顏色就是color

           d. border用來設定容器內元素的定位，background-position只能定位左上，可通過設定border-right設定透明邊

               框，設定子元素為background-position：100% 40px；來實現

           e. 用border的solid樣式來實現三角/梯形等圖形，將部分border設定為transparent；其梯形還可用來模擬圓角，

               在矩形上下新增兩個梯形來實現。

        3. border與透明邊框：之前講到的子元素定位、三角等圖形

               增加響應區域大小，原邊框可通過box-shadow的inset來代替；

               增加可視渲染區域：通過 filter: drop-shadow(20px 0 #ff8040);可實現圖片變色，通過設定右側透明邊框可

                                                增加可視區域，使得overflow：hidden後還可以看到投影圖示；

4. border實現等高佈局，但是不支援百分比寬度；

padding

1. padding對元素尺寸的影響：

a. 對於block水平元素:

                                padding值暴走，一定會影響元素尺寸；

       width值非auto，padding值會影響元素尺寸；

        width值為auto或設定了box-sizing: border; ，且padding值沒有暴走，則不會影響元素尺寸；

b. 對於inline水平元素: 水平padding影響尺寸，垂直padding不影響尺寸；但會影響垂直方向的背景區域；

可用結合border實現高度可控的分隔線：

2. padding不支援負值，block水平元素padding百分比值均是相對於寬度計算的，利用此特性輕鬆實現正方形；

inline水平元素padding百分比值同樣是相對於寬度計算的，內聯元素的垂直padding會使得“幽靈空白節點”出

現，就是標準中的“strut”使得高度寬度細節有差異，可用font-size:0px;來解決；且有文字時padding會換行；

3.對於button元素，在IE瀏覽器下文字越多padding越大的解決方案：button{ overflow: visible;}

在FireFox瀏覽器中如何設定padding為0：button::-moz-focus-inner{ padding: 0;}

瀏覽器設定padding高度後的button元素高度計算不同：通常用a標籤去模擬按鈕，如何使用button:

通過label標籤來實現，使其for與button的id一致，讓button元素可訪問性隱藏，定位到螢幕之外之外，

或設定z-index:-1;

4. padding與圖形繪製：通過一個div實現三道槓，通過padding和background-clip: content-box;

白眼效果：

5. padding與佈局：

a.padding百分比值均是相對於寬度計算的，利用此特性輕鬆實現正方形；

b. 實現等高佈局：

c. 兩欄自適應佈局：padding在子元素上/padding在容器上：

margin

1. margin與可視尺寸：

對於沒有設定寬度、高度的block水平元素：只改變水平方向尺寸

2. margin與佔據尺寸：inline-block與block均可用，與寬高是否設定無關，水平與垂直方向都適用；

應用：實現滾動容器內上下留白

3. margin與百分比單位：

普通元素margin百分比都是相對於容器寬度計算的；

絕對定位元素的margin百分比是相對於第一個定位元素(relative/absolute/fixed)的寬度計算的；

4. margin重疊只會發生在block元素的垂直方向上

非空block元素重疊條件：

父元素非塊狀格式化上下文———通過overflow: hidden可以消除重疊；

父元素沒有border-top設定———設定border-top可以消除重疊；

父元素沒有padding-top設定———設定padding-top可以消除重疊；

父元素和第一個/最後一個子元素之間沒有inline元素———在父和子元素之間新增inline元素，

eg: 可以消除重疊；

父元素的height設定可以消除margin-bottom重疊；

空block元素自身重疊條件：

元素沒有border設定——

元素沒有padding值——

元素裡沒有inline元素——

元素沒有height或min-height——

重疊計算：正正取大值，正負取相加，負負最負值；

善用margin重疊：寫列表或垂直佈局是使用上下margin;

5. margin：0 auto；只針對block水平元素；圖片設定為display:block;則可通過margin：0 auto;居中。

垂直居中方法：

a.父元素設定writing-mode: vertical-lr;時，子元素margin:auto;垂直居中，但水平不居中了；

b.父元素相對定位，子元素絕對定位，left:0; right:0; top:0; bottom:0; margin:auto;可實現垂直居中；

6. margin負值的應用：

a. 使用margin-right負值實現列表元素

b. margin很大負值，margin改變元素佔據的空間，padding很大正值來彌補空間，實現兩欄等高佈局 ，

必須通過overflow:hidden來限制：

c. 自適應佈局，有點：DOM順序與最終視覺順序相符

7. margin設定無效情況：

inline元素(非替換元素eg:img，正常書寫模式)垂直margin無效；

margin重疊；

display:table-cell/display:table-row等宣告的margin無效；

替換元素eg:img的display:table-cell的margin是有效的；

浮動元素後的元素：鞭長莫及導致的margin無效，實際為值不夠大；

內聯元素特性導致的margin無效；

8.margin-start:正常流向下等同於margin-left，兩者重疊不累加；margin-start不一定是左邊方向；若水平流是從右向左，則margin-start等同於margin-right；在垂直流中(writing-mode:vertical-*;)，margin-start等同於margin-top.

margin-end同理，margin-before/margin-after預設流下等同於margin-top/margin-bottom;

針對margin重疊：-webkit-margin-collapse:collapse/discard/separate;