1.基礎選擇器的優先級
權值：標識當前選擇器的重要程度，權值越大優先級越高。
元素選擇器 1
類選擇器 10
偽類選擇器 10
ID選擇器 100
內聯樣式 1000
選擇器的權值加到一起，大的優先
權值相同 以後定義的為主
2.尺寸與邊框
1.單位
1.尺寸單位
1.px 像素 1024*768px
2.in 英寸 1in=2.54cm
3.pt 磅 1pt=1/72in 用於描述文字的單位
4.cm 厘米
5.mm 毫米
6.em 相對於父元素乘以倍數（12px*2em=24px）
7.rem 相對於根元素（body）
8.% 百分比
2.顏色單位（顏色取值）
1.rgb(r,g,b)
r:red
g:green
b:blue
r,g,b:取值0-255
2.rgb(r%,g%,b%)
3.rgba(r,g,b,alpha)
alpha:透明度，0-1之間的小數，值越大越不透明。
ex:
rgb(0,0,0,0.3)
4.#rrggbb
由0-9和a-F組成
#ffffff
#000000
#dddddd
5.#rgb是上面的縮寫
#ffffff-->#fff
#000000-->#000
#dddddd-->#ddd
6.顏色的英文單詞
red,green,gray,purple,blue...
2.尺寸
1.作用
改變元素的寬度和高度
2.語法
屬性：
寬度：width
min-width 最小寬度
max-width 最大寬度
高度：height
min-height 最小高度
max-height 最大高度
3.註意：頁面中哪些元素能修改尺寸
1.所有的塊級元素都允許修改尺寸
div,p,h1,h2...,結構標記，ul,ol,dl,dt,dd
2.行內塊元素允許設置尺寸
表單控件元素（單選按鈕和復選框除外）
3.本身具備width和height屬性的元素
img,table
大部分的行內元素是無法修改尺寸的。
4.溢出處理
當內容多，元素區域小的時候，就會產生溢出的效果，默認都是縱向溢出。
屬性：
overflow,overflow-x,overflow-y
取值：
1.visible 可見的，默認值，溢出可見
2.hidden 隱藏的，溢出的內容全部隱藏，不可見
3.scroll 顯示滾動條，溢出時，可用
4.auto 自動，溢出時才顯示滾動條並可用
練習：
完成如圖所示效果
邊框 border:1px solid #000;
3.邊框
1.邊框簡寫方式
屬性：
border:width style color;
width:邊框的寬度（粗細）
style:邊框的樣式
取值：solid 實線
dotted 虛線（圓點）
dashed 虛線（線條）
color:邊框顏色（transparent透明色）
以上方式是同時設置四條邊框的樣式。
取消邊框：border:0/none;
練習：
網頁中創建一個div元素，設置高寬各300px,並且設置四條邊框為1px的寬度，橙色（orange）的實線條。
2.單邊框定義
設置四條邊框中的某一個邊框。
屬性：
border-top/bottom/left/right:width style color;
3.單屬性定義
設置四條邊框的某一個屬性
屬性：
border-width/style/color:值;
4.單邊單屬性
設置某一條邊的某一個屬性
border-方向-屬性：值;
方向：top/bottom/left/right
屬性：width/style/color
ex:
border-top-color:red;
練習：
1.設置四個方向的邊框樣式都為虛線
2.設置下邊框的顏色為黃色
4.邊框倒角
將元素的直角倒成圓角。
屬性：border-radius
取值：
1.以px為單位的數字
2.百分比 x%(設置圓形 50%)
單角設置：
border-top-left-radius:左上角
border-bottom-left-radius:左下角
border-top-right-radius:右上角
border-bottom-right-raidus:右下角
5.邊框陰影
屬性：box-shadow
取值：h-shadow v-shadow blur spread color inset
h-shadow:陰影的水平偏移距離，必須值
取值為正，陰影向右偏移
取值為負，陰影向左偏移
v-shaodw:陰影的垂直偏移距離，必須值
取值為正，陰影向下偏移
取值為負，陰影向上偏移
blur:陰影模糊距離（可選值）
spread:陰影尺寸（可選值）
color:陰影顏色（可選值）
inset:將默認的外陰影改為內陰影（可選值）
練習：
1.設置圓形的外發光效果。
2.在溢出練習基礎上，給每幅圖設置5px的圓角，並且鼠標懸停在圖片上時，設置向右下方5px的陰影效果，陰影顏色#ddd。
6.輪廓
輪廓指的邊框的邊框，繪制於邊框外圍的條線。
屬性：
outline：width style color;
outline:0/none; 取消輪廓
練習：
在頁面中創建一個文本框，嘗試著取消輪廓，再觀察效果。
3.框模型
1.什麽是框模型
頁面的元素皆為框
框模型：box model盒子模型，定義了元素框處理元素的內容，內邊距，外邊距以及邊框的一種計算方式。
內邊距：元素邊框與內容區域之間的空白間距
外邊距：元素與元素之間的空白間距
框模型默認的計算方式：
元素的實際占地寬度=左右外邊距+左右邊框+左右內邊距+width
元素的實際占地高度=上下外邊距+上下邊框+上下內邊距+height
2.外邊距
1.什麽是外邊距
圍繞在邊框外的空白間距
2.語法
屬性：margin 定義四個方向的外邊距
margin-top/bottom/left/right單邊定義
取值：
1.以px為單位的數字
2.取值為負
margin-left
取值為正，元素往右移動
取值為負，元素往左移動
margin-top
取值為正，元素往下移動
取值為負，元素往上移動
3.百分比 %
外邊距的值，占父元素的高或寬的比例
4.取值為auto
自動計算外邊距的值
控制塊級元素在水平方向居中對齊。
練習：
頁面中設置兩個div尺寸為200*200，兩個div之間的間距為50px,然後設置第二div水平居中顯示。

3.簡介寫法
1.margin:value; 四個方向的外邊距
2.margin:v1 v2;
v1:上下外邊距
v2:左右外邊距
3.margin:v1 v2 v3;
v1:上
v2:左右
v3:下
4.margin:v1 v2 v3 v4;
上 右 下 左
4.自帶外邊距的元素
h1~h6,p,ul,ol,dl,pre,body
通過CSS Reset（CSS重寫）的方式，來重置具備外邊距的元素
body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd,dt,pre{margin:0;}
5.外邊距的特殊效果
1.外邊距合並
當兩個垂直外邊距相遇時，他們將合並成一個，最終的距離取決於兩個外邊距中距離較大的那個。
2.上外邊距溢出
在某些特殊的條件下，為子元素設置上外邊距時，有可能會作用到父元素上。
1.父元素沒有上邊框
2.為第一個子元素設置上外邊距時
解決方案：
1.為父元素增加上邊框
弊端：對父元素的高度有影響
2.使用父元素的上內邊距取代子元素的上外邊距
弊端：對父元素的高度有影響
3.在父元素的第一個子元素位置處，增加空<table></table>標記
3.行內元素以及行內塊元素的外邊距
1.行內元素垂直外邊距無效（img除外），左右外邊距相遇時會相加
2.行內塊元素，設置垂直外邊距時，整行元素都跟著發生改變

練習：
1.創建兩個div元素，d1和d2,分別設置不同的背景顏色，尺寸都為200*200；
2.在d2中再添加一個子元素div,id為d3,設置d3的尺寸為100*100，並設置背景顏色；
3.設置d3的上外邊距為50px,觀察結果。
3.內邊距
1.什麽是內邊距
元素邊框與內容之間的空白間距
內邊距會擴大元素邊框的占地區域
2.語法
屬性：
padding:value; 四個方向的內邊距
padding-top/bottom/left/right:value; 單邊設置
取值：
1.以px為單位的數字
2.以%為單位的數字
3.簡潔寫法
padding:value
padding:v1 v2
上下 左右
padding:v1 v2 v3;
上 左右 下
padding:v1 v2 v3 v4;
上 右 下 左（順時針）
練習：
創建兩個div，d1和d2,尺寸200*200，並設置邊框為2px solid #f00;
為d1設置四個方向的內邊距為30px，觀察兩個div效果。
4.box-sizing屬性
作用：指定框模型的計算方式
取值：
1.content-box
默認值，采用默認的計算方式。
實際占地寬度=左右外邊距+左右邊框+左右內邊距+width
實際占地高度=上下外邊距+上下邊框+上下內邊距+height
2.border-box
元素的尺寸，會包含border以及padding的值。
實際占地寬度=width(包含border和padding)+margin
實際占地高度=height(包含border和padding)+margin

CSS-尺寸與邊框