每一個元素都會有寬高，即使元素寬高為0。
首先，我們從元素的盒模型開始。
這里的默認情況都是不帶有 user agent stylesheet

<div></div>

當一個元素的content為空時，這個元素的高度為0。但是默認寬度是100%。

從margin開始

margin 是盒子的外邊距，這個外邊距實際上就是元素和元素之間的在文檔上的互相排斥的界限，默認情況下，元素間的margin值為0，元素間緊密貼合。
margin是一個復合屬性
當設置一個屬性值時，表示四周的外邊距全部設置為該值。

margin: 10px /* 四周 */;

當設置兩個值時，表示該值將會按照上下，左右的順序設定外邊距

margin: 10px /* 上下 */  20px /*左右*/;

當設置四個值時，以十二點鐘順時針方向設定?? 、??、??、?? 四邊外邊距。

margin: 10px /* 上 */  20px /*右*/  30px/*下*/ 10px/*左*/;

分別為每一個邊設立外邊距時，可以使用邊后綴 -top 、-right、-bottom、-left單獨設定。

負的外邊距
盡管看起來好像是不對的，但是實際上可以設立負的外邊距。

• 當塊元素沒有設定寬度時，負left或者負right，會增加左邊或者右邊寬度
• 當設定負top時，會向上移動距離。
• 當設定負bottom時，下面元素會向上移動距離，減少元素的css讀取高度（這句話不理解，可能是margin的高度縮減了content區(qū)域。）
  • 多列等高應用。使用減少css讀取高度這個特性，可以將子元素各列按照最高元素的高度設定

<style>
.container{  margin:0;overflow:hidden;}
.container div{ float: left;width:100px;  }
.list1 {height:50px; background-color:red;margin-bottom:-5000px;padding-bottom:5000px}
.list2 {height:100px; background-color:blue;margin-bottom:-5000px;padding-bottom:5000px}
.list3 {height:30px; background-color:green;margin-bottom:-5000px;padding-bottom:5000px}
</style>
<div class="container">
    <div class="list1"></div>
    <div class="list2"></div>
    <div class="list3"></div>
</div>

margin-bottom:-5000px

• 當相鄰的兩個塊元素同時設定 bottom和top為負值時，只會取絕對值大的距離移動
• 當元素浮動時，相鄰的兩個元素，如果設定了負left值，則會向前一個元素移動覆蓋距離。

一般行內(nèi)元素的外邊距
前面說過，一般行內(nèi)元素是沒有上下邊距的，只有左右邊距。

padding

和margin設定順序相同，也可增加方向后綴單獨設定。padding實際上是content部分的拓展區(qū)域，以空白拓展content內(nèi)容。
唯一不同的是，沒有負padding。

border 邊框

邊框是盒子的裝飾部分，可繼承屬性
單獨的 border 是一個復合屬性，使用屬性后綴 -width厚度 -style樣式 -color 顏色，設定整個邊框的單獨屬性。

• -width 厚度，使用常規(guī)的尺寸單位即可比如px、rem
• -color 顏色，使用常規(guī)的顏色值比如十六進制，rbg函數(shù)
• -style 線條樣式
  • dotted 點線
  • dashed 虛線
  • solid 實線
  • double 雙實線，雙實線的寬度等于border-width的值
  • groove 3D 凹槽邊框,其效果取決于 border-color 的值
  • ridge 3D 壟狀邊框。其效果取決于 border-color 的值。
  • inset 3D inset 邊框。其效果取決于 border-color 的值。
  • outset 3D outset 邊框。其效果取決于 border-color 的值。

border:1px solid #f0f0f0;/*復合設定*/
/*單獨設定*/
border-width:1px;
border-style:dashed;
border-color:#ff0;

由于border是多屬性復合，因此沒有margin和padding那樣的混合設定，因此如果需要對單邊設定可以使用 方向后綴 -top、 -bottom、 -left、 -right，同時單邊也有屬性后綴，用來設定單邊屬性。

/*單邊復合設定*/
border-top:1px solid #afafaf;
/*單邊單獨設定*/
border-top-width:2px;
border-top-style:double;
border-top-color:#aaf;

border-radius 邊框圓角
該屬性是一個復合屬性，設定屬性值時，可以使用一般長度數(shù)值設定，圓角分界線以盒子中心線將四條邊分割成八個可以設置圓角的邊。

復合設定時按照順時針，分別為 上左(-top-left)，上右(-top-right)，下右(-bottom-right)，下左(-bottom-right)。
雙屬性設定時，分別為上左，下右，和上右，下左的上下順序。而每個拆分屬性分別可以設置兩個值，代表兩條邊的弧度包圍成一個角。
border-radius共可以設定8個值，分別對應四個角，順序按照上下邊 / 左右邊的順序設定，和上左，上右，下右，下左一一對應。

圓角設定時，有一個上限，如果用百分比設定，上限為50%，如果用像素設定，則為窄邊一半。
當盒子長寬相等時，使用像素還是百分比都是相同效果。如果長寬不等時，會有差異。

50%

50px

整體設定，則為整個圓角設定

/*統(tǒng)一設定*/
border-radius:20px;
border-radius:20px  15px；
border-radius:20px  20px  0 0;

/*單角設定上左圓角*/
border-top-left-radius:20px;

/*對左上角的兩條邊設定弧度*/
border-top-left-radius:10px 5px;
/*8條邊分別設定，按照順序，中間使用 / 分割 */
border-radius:5px 5px 10px 10px / 5px 5px 10px 10px ;

box-shadow 盒子陰影
之前在文字修飾章節(jié)里面有一個text-shadow，不過那里只有四個屬性，而在box-shadow里面，陰影多了一個陰影的延展范圍。
什么叫陰影的延展范圍。
常規(guī)下，在不模糊的狀態(tài)下 影子的尺寸和應該和原始盒子的尺寸相同，此時，如果我們需要調(diào)整陰影大小，那就需要對陰影的尺寸外延或者內(nèi)縮，就需要設定延展范圍。

box-shadow:1px 1px 5px red;/* 沒有攜帶延展范圍*/
box-shadow:1px 1px 5px 10px red;/* 攜帶10px延展范圍*/

陰影部分通常會和交互事件一起連用，比如mousedown，touchstart等等，提供比較明顯的交互效果。

• 內(nèi)陰影 inset
  通常陰影分為兩種，默認情況下是外陰影，而添加了inset后變?yōu)閮?nèi)陰影。

box-shadow:1px 1px 5px red inset; /* 內(nèi)陰影 */

border-image 圖像邊框
這一塊是border的補充，在設定border-image的同時也需要設定border樣式。
該屬性是一個復合屬性，可以使用后綴屬性

• -source 圖像的數(shù)據(jù)源 使用url()函數(shù)，引用相對地址或者絕對地址
• -slice 邊框背景圖的分割方式
  將圖像按照上右下左的方式切割。這個切割實際上為九宮格切割，將圖片按照
  上左(top-left) 上(top) 上右(top-right)
  左邊(left) 中間(middle) 右邊(right)
  下左(bottom-left) 底部(bottom) 下右(bottom-right)
  4條線切順時針割出9個區(qū)域，但是中間的區(qū)域是內(nèi)容區(qū)域，因此為空白部分。

線條切割圖形

四個角的區(qū)域是不會被拉伸的，也不會平鋪，也不會重復，只有上下左右四條邊可以設定repeat屬性。
如果相對的裁切的范圍產(chǎn)生交集，則會導致邊的消失，只存在角。

如果按照四個值來切，切割順序按照順時針方向切割。紅色第一??是水平方向上部分一刀。藍色第二??是垂直右側一刀。紫色第三??是水平下部分一刀， 黃色第四??則是左側垂直一刀。

切割順序

border-image-slice:27 18 20 22;

如果按照兩個值來切，則是棕色上下和藍色左右。

兩刀順序

如果提供fill屬性，則表示保留middle區(qū)域，用來填充content

fill屬性

不含fill

• -width邊框厚度
  這個屬性可以設置不帶單位的正數(shù)值，表示為因子，和border-width屬性相乘得到實際結果，默認為1。也可以使用單位長度數(shù)值，px、rem等等。
• -outset邊框背景圖的擴展 . 使用無單位數(shù)值，把邊框的按照默認位置向外偏移，(可以使用百分比，但是chrome下并未生效)。
• -repeat邊框圖像的平鋪方式
  • round 類似平鋪，如果無法完整平鋪所有圖像，則對圖像進行縮放以適應區(qū)域
  • repeat 平鋪。
  • space 如果無法完整平鋪所有圖像，擴展空間會分布在圖像周圍
  • stretch 默認值拉伸。

所有內(nèi)容區(qū)域以四個角的寬高和所在位置為準，四條邊和middle的區(qū)域按照角的寬高和覆蓋內(nèi)容自適應。
噢對了，設置了border-image只會，border-radius就不可以使用了——畢竟沒了四個角和border-image強調(diào)四個角相沖突。
說了這么多，這個東西有什么用？可以理解為安卓上的9.png。最直觀的就是qq的聊天氣泡了。

outline 輪廓線

輪廓線不包括margin部分，其設置屬性有后綴 -width 厚度 -style 線條樣式 -color 線條色彩。
除了不能單獨設定外輪廓線的四條邊，其余和border相同

background 背景

背景是非常重要的裝飾屬性，用來繪制盒子的背景內(nèi)容，包括 -color 背景色 -image 背景圖，并且同時可以存在背景色和背景圖兩種屬性。就好比一面墻，先涂底色再貼廣告。因此，在一般情況下，會同時設定兩個屬性，保證背景圖未加載時，使用背景色替代。

在繪制背景色時，默認背景色開始位置從左上角border區(qū)域開始，到右下角border結束，而image則是從文檔的左上角content開始到右下角border結束。具體的可以設置一個transparent透明色的border后，同時設背景色和背景圖，就可以很容易觀察到了。

如果想調(diào)整，針對背景圖需要使用到 -origin 調(diào)整初始位置，之前也提到過，在box-sizing有兩個border-box和content-box屬性值，而這里又多了一個padding-box,而這里的origin實際上就是背景的填充參考范圍。
由于背景色是整塊覆蓋，不像圖像一樣擁有不規(guī)則的，因此使用裁切方式 -clip ，屬性值和origin相同。
就好比，寫文章，寫字。這張紙一般情況下都是純白色的，即使換了顏色，也是整張紙換顏色。而里面貼的圖很少從左上角開始的，通常會有留白，這也就是開始位置和背景色是不同的。使用兩個屬性調(diào)整覆蓋范圍，留白還是不留，全看心情怎么做。

還是用刷墻貼海報來說，一面墻很少刷的五顏六色的，所以在css中，只能設置一種背景色。但是一面墻可以貼的五花八門的，所以css給了多個背景圖的使用權。

重點還是說背景圖，因為背景圖的花樣多。
背景圖除了常規(guī)的url引用圖像或者base64圖像字符之外，還可以使用：

• image() 這個函數(shù)用來引用一個image圖像【然而目前并不支持】，如果圖像加載失敗可以使用背景色覆蓋，大小和圖像大小一致，這樣可以避免background-color覆蓋范圍和image大小不一致。background-image: image(bg.png,black) 并且，這個還提供了一個圖形的矩形裁切，#xywh查詢參數(shù)background-image: image(bg.png#xywh=10, 10, 20, 20, black)
• image-set() 這個可以根據(jù)不同分辨率提供不同質量的圖片
  image-set( "test.png" 1x, "test-2x.png" 2x, "test-print.png" 600dpi )
• gradient 色彩漸變，如果漸變的漸變色位置沒有指定，將會按照設置的漸變顏色等分100%，以使得顏色均勻分布。這里有以下幾種漸變前綴

1. linear- 線性漸變
   默認情況下是從上到下to bottom相當于 180deg?？梢栽O置 to up 相當于 0deg，to left相當于270deg，to right相當于90deg或者指定角度比如45deg。接下來需要從開始顏色和開始位置到結束顏色和結束位置,這里位置代表的是色彩過渡到完全使用到該色號時的位置，可以使用所有的長度的數(shù)值單位，不可以為負值。

background-image:linear-gradient( to left, red, blue  45% );

2. radial-徑向漸變
   徑向漸變除了色彩和漸變開始位置，還有幾個關鍵點。首先，如果用過PS的都知道，徑向漸變需要拉一條線，代表這個徑向漸變的開始位置和結束位置——實際上也就是徑向的半徑。徑向漸變主要有circle（正圓）ellipse（橢圓）兩種形狀。css里面提供了幾種默認機制，創(chuàng)建這兩種內(nèi)容。

• 創(chuàng)建正圓徑向：
  2.1 橢圓的相同半徑 ：50px 這里只寫了一個，實際上等于 50px 50px 表示橢圓x軸半徑和y軸半徑相等，可以使用百分比
  2.2 使用關鍵字創(chuàng)建默認圓：circle 只需要一個關鍵字，就會在當前盒子的正中心創(chuàng)建一個正圓。
  2.3 使用關鍵字+半徑創(chuàng)建：circle 50px。 半徑必須是指定的長度單位，而不能是百分比。
• 創(chuàng)建橢圓徑向
  2.4 使用橢圓半徑。50px 60px
  2.5 橢圓關鍵字 ellipse 實際上等于50% 50%，會以當前盒子的半徑