1 選擇器的優先級

　　選擇器的優先主要考慮選擇器的權重

　　可以將各種選擇器的權重以數值來表示，數值越大，優先級越高

　　復雜選擇器優先級的計算：

　　　　1 群組選擇器不參與計算

　　　　後代和子代選擇器，各種選擇器權值

　　　　2 偽類選擇器的權值與類選擇器保持一致，都是10

　　2 尺寸單位

　　　1 。px ：像素單位，瀏覽器默認單位

　　　2 %：百分比，參照父元素對應屬性的值計算

　　 3 in : inch 英寸 換算： 1 inch = 2.54cm

　　　4 pt :磅 ，1 pt = 1/72 in

　　 5 cm

　　　6 mm

　　　補充：

　　　7 em:默認情況下，字體大小為16px, 1 em =16px

　　3 顏色取值

　　　　1 英文單詞

　　　　2 rgb()表示法：

　　　　　　根據紅綠藍三原色組合呈現不同的顏色

　　　　　每個值取值範圍 0~255

　　　　3 rgba(r,g,b,alpha)表示法

　　　　　　rgb三原色取值範圍 0~255

　　　　　　alpha透明度取值範圍0 （透明）-1（不透明）

　　　　4 顏色的十六進制表示法

　　　　　　把三原色的十進制範圍 0~255 轉換成十六進制表示

　　　　　　十六進制的取值範圍：0-9 a-f

　　　　　　　0-255 換算成十六進制 00-ff

　　　　　　　　語法：#開頭，跟 上 6位的十六進制，每兩位為一組表示一種三原色

　　　　5 短十六進制表示顏色

　　　　　　# 開頭，采用三位十六進制代表三原色

　　　　　　瀏覽器在解析時，會自動會對每一位進行重復，補全成長十六進制

　　3 HTML 標簽分類

　　　　1 塊級元素：

　　　　　　特點：

　　　　　　　　1 獨占一行，不與其他元素共行

　　　　　　　　2 可以手動調整寬度

　　　　　　　　3 默認情況下，塊元素的寬度與父元素保持一致

　　　　　　常見塊元素：body h1-h6 div ul ol li table form p

　　　　2 行內元素：

　　　　　　特點：

　　　　　　　　1 可以與其他元素共行顯示

　　　　　　　　2 不可以手動調整寬高大小

　　　　　　　　3 實際大小由元素的內容多少決定

　　　　　　常見行內元素： span label i b s a sup sub strong

　　　　3 行內塊元素：

　　　　　　特點：

　　　　　　　　1 可以共行顯示

　　　　　　　　2 可以手動調整寬高

　　　　　　 常見的行內塊元素 img input button

尺寸與邊框

　　1 尺寸

　　　　1 屬性：

　　　　　　width height 分別設置元素的寬高大小

　　　　　　取值：像素值或是百分比

　　　　　　註意：塊元素和行內塊元素可以設置寬高屬性

　　　　2 溢出處理

　　　　　　溢出處理，內容超出元素尺寸範圍，稱為內容溢出,默認情況下，溢出部分仍然可見

　　　　 屬性：overflow 可以處理內容溢出

　　　　　　取值：

　　　　　　　　1 visible 默認值，溢出部分仍然可見.　　

　　　　　　　　2 scroll 添加滾動條,包含水平和垂直方向，不管該方向有沒有發生內容溢出，都顯示滾動條

　　　　　　　　3 auto 自動添加滾動條

　　　　　　　　4 hidden 隱藏溢出部分

　　2 邊框

　　　　1 邊框實現：

　　　　　　屬性：border

　　　　　　取值：border-width border-style border-color

　　　　　　邊框寬度，樣式，顏色，三個值缺一不可（即使有些值是默認的）

　　　　　　　　border-width :取像素值，設置四個方向邊框寬度

　　　　　　　　border-style :邊框樣式

　　　　　　　　　　取值：

　　　　　　　　　　　　solid 實線邊框

　　　　　　　　　　　　dashed 虛線邊框

　　　　　　　　　　　　dotted 點線邊框

　　　　　　　　　　　　doule 雙線邊框

　　　　　　　　border-color ;設置邊框顏色，取顏色值

　　　　　　註意 ：

　　　　　　　　1 使用border 屬性為元素設置邊框，是同時設置 上 右 下 左 四個方向的邊框

　　　　　　　　2 取消默認邊框，border : none；常用於按鈕

　　2 單邊邊框的設置

　　　　屬性：

　　　　　　1 border-top :設置頂部邊框

　　　　　　2 border-right :設置右邊邊框

　　　　　　3 border-bottom :設置底部邊框

　　　　　　4 border-left :設置左邊邊框

　　　　　　取 值：border-width border-style boder-color

　　3 網頁三角標制作：

　　　　1 設置空的塊元素，寬度為0

　　　　2 為元素設置等寬的邊框

　　　　3 調整邊框顏色，顯示一個方向的邊框，其余邊框設置透明邊框顏色 transparent

　　　　　註意：四個方向的邊框缺一不可，缺少的話，邊框會恢復成矩形邊框，不再是三角形

　　4 輪廓線

　　　　屬性：outline

　　　　取值：width style color

　　　　註意：輪廓線圍繞在元素內容區域四周，與邊框類似，但有區別：輪廓線在網頁中不占位，邊框在網頁中是實際占位的

　　　　取消輪廓線：outline:none ;

　　5 圓角邊框

　　　　1 屬性：border-radius

　　　　2 取值：像素值或者百分比

　　　　　　1 border-radius:20px

　　　　　　　　一個值表示四個角都以20px 做圓角

　　　　　　2 border-radius:20px 40px

　　　　　　　　取兩個值，按照上右下左順時針方向設置圓角，從左上角開始，依次取值，在給兩個值的情況下，上下保持一致，左右保持一致

　　　　　　3 border-radius: 10px 20px 30px ; 三個值，左右角一致，對應的角值是一致

　　　 3 百分比取值實現元素形狀改變

　　　　　　border-radius;50%;　　

　　　　　　註意：使用百分比設置圓角邊框時，是參照當前元素的尺寸進行計算的

　　　　　　　　如果元素本身是長方形，設置50%的圓角會變成橢圓

　　　　　　　　如果元素本身是正方形，會變成正圓

　　6 盒陰影

　　　　屬性：box-shadow

　　　　取值：

　　　　　　offset-x 陰影的水平偏移距離，取像素值

　　　　　　offset-y 陰影的垂直偏移距離，取像素值

　　　　　　blur 　陰影的模糊程序，取像素值，值越在越模糊

　　　　　　spread 陰影的延伸距離（可選），取像素值，可以擴大陰影的範圍

　　　　　　color 設置陰影顏色（默認為黑色）

　　　　註意：不管是瀏覽器窗口中還是元素本身，都存在坐標系，都以左上角為（0，0）點，向右，向下代表x 和y 軸的正方向

5 盒模型（框模型）

　　1 在css中。認為一切元素都是框，都是矩形區域

　　　 盒模型：計算元素在文檔中的實際占位情況

　　　　副模型組成：margin(外邊距) border

　　　　　　　　　　padding(內邊距) content(元素的寬高尺寸)

　　　　元素在文檔中實際尺寸的計算：

　　　　　　默認情況下：

　　　　　　最終寬度 = 左右外邊距+ 左右邊框寬度+左右內邊距+width

　　　　　　最終高度 = 上下外邊距 + 上下邊框 + 上下內邊距 + height

　　　2 margin

　　　　1 margin表示外邊距：元素邊框與其他元素邊框之間的距離

　　　　2 取值：像素值

　　　　　　1 .margin :10px

　　　　　　　　表示設置上右下左四個方向都為10px的外邊距

　　　　　　2 margin:10px 20px

　　　　　　　　表示設置上下外邊距為10px，左右外邊距為20px;

　　　　　　3 margin:10px 20px 30px;

　　　　　　　　表示上右下左四個方向上的外邊距分別為：

　　　　　　　　　　10 20 30 20

　　　　　　4 margin: 10px 20px 30px 40px;

　　　　　　　　分別設置四個方向的邊距值

　　　3 單方向外邊距的設置

　　　　1 屬性：

　　　　　　1 margin-top:上方外邊距

　　　　　　2 margin-right:右邊的外邊距

　　　　　　3 margin-bottom: 底部外邊距

　　　　　　4 margin-left:左邊外邊距

　　　　2 取值：像素值

　　　　　　只給當前方向設置外邊距，給一個值

　　4 特殊取值：

　　　　1 。margin:0; 設置元素外邊距為0 ，常用於初始化頁面樣式，取消一些元素的默認外邊距

　　　　2 。margin:0 auto;設置左右外邊距自動，用來實現元素的居中效果。auto只對左右外邊距起作用

　　　　3 。取負值：

　　　　　　會移動元素的位置，負值表示向上向左移動元素，常用於頁面元素位置的微調

　　5 自帶默認外邊距的元素：

　　　　body h1-h6 p ul ol

CSS 樣式表｛二｝