一，CSS的三大特性
分別是層疊性 繼承性 優先順序
1 層疊性
相同選擇器給設定相同的樣式，此時一個樣式就好覆蓋（層疊）另一個衝突樣式。層疊性注意解決樣式衝突的問題。。
層疊性原則：
①樣式衝突，遵循的原則就是就近原則，那個樣式離結構近，就執行那個樣式。
②樣式不衝突，不會層疊。
2 繼承性
CSS中的繼承，子標籤會繼承父標籤的某些樣式，如文字顏色和字號。
①恰當使用繼承可以簡化程式碼，降低CSS樣式的複雜性。
②子元素可以繼承父元素的樣式（text,font-,line- 這些元素開頭的可以繼承，以及color屬性）
2.1行高的繼承性
body {
font: 12px/1.5 '微軟雅黑';
}
①行高可以跟單位也可以不跟單位
②如果子元素沒有設定行高，則會繼承父元素的行高為1.5.
③此時子元素的行高是：當前子元素的文字大小*1.5。
④body行高1.5 這樣寫法最大的優勢就是裡面子元素可以根據自己文字大小自動調整行高。

3 優先順序
給同一個元素指定多個選擇器，就好有優先順序的產生。
①選擇器相同，則執行層疊性
②選擇器不同，則根據選擇器權重執行。
選擇器權重：
選擇器 選擇器權重
繼承 或者* 0,0,0,0
元素選擇器 0,0,0,1
類選擇器，偽類選擇器 0,0,1,0
ID選擇器 0,1,0,0
行內樣式style=“” 1,0,0,0
!importa 重要的 =無窮大

優先順序注意點
①權重是由4組數字組成，但是不會有進位。
②可以理解為 類選擇器永遠大於元素選擇器 id選擇器永遠大於類選擇器 以此類推。
③從左往右依次比較，如果某一位數相同，則判斷下一位數值。
④簡單記憶法：萬用字元和繼承權重為0，標籤選擇器為1，類（偽類）選擇器為10，id選擇器為100，行內樣式為1000，！important為無窮大。
⑤繼承的權重是0 如果該元素沒有直接選中，不管父元素權重多高，子元素得到的權重都是0.

權重疊加：如果是複合選擇器，則會有權重疊加，需要計算權重
di ui li----------------------0,0,0,3
.nav ul li---------------------0,0,1,2
a:hover----------------------0,0,1,1
.anv a------------------------0,0,1,1

一，盒子模型
網頁佈局三大核心：盒子模型，浮動和定位
1.1看透網頁佈局的本質
網頁佈局過程：
①先準備好相關的網頁元素，網頁元素基本都是盒子Box.
②利用CSS設定好盒子的樣式，然後擺放到相應的位置
③往盒子裡面裝內容。
核心：就是利用CSS擺盒子。
1.2 盒子模型（BOX Model）組成
盒子模型：就是把HTML頁面中的佈局元素看作是一個矩形盒子，也就是一個裝內容的容器。
CSS盒子模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊框，外邊距，內邊距，和實際內容。
border 邊框 content 內容 padding 內邊距 margin 外邊距
1.2.1邊框（border）
邊框： 邊框的粗細 邊框的樣式 邊框的顏色
語法：
border:border-width/border-style/bortder-color
屬性 作用
border-witdh 定義邊框粗細，單位是px
border-style 邊框的樣式
border-color 邊框的顏色
邊框簡寫：
border: l px solid red ; 沒有順序
邊框分開寫法：
border-top：1px solid red; // 只設定上邊框 其餘同理//

1.4表格的細線邊框
border-collapse屬性控制瀏覽器繪製表格表框的方式，它控制相鄰單元格的邊框。
border-collapse：collapse；
①collapse 單詞是合併的意思
②border-collapse：collapse 表示相鄰邊框合併在一起
1.5 邊框會影響盒子實際大小
邊框會額外增加盒子的實際大小
①測量盒子大小的時候，不量邊框
②如果 測量的時候包含了邊框，則需要width/height減去邊框寬度
1.6內邊距（padding）
padding屬性用於設定內邊距，即邊框與內容之間的距離。
屬性 作用
padding-left 左內邊距
padding-right 右內邊距
padding-top 上內邊距
padding-bottom 下內邊距
padding屬性（簡寫屬性）可以有一個到四個值。
值的個數 表達意思
padding：5px 1一個值，代表上下左右都有5畫素內邊距；
padding：5px 10px; 2個值，代表上下內邊距是5畫素，左右內邊距10畫素；
padding：5px 10px 20px; 3個值，代表上內邊距5畫素，左右內邊距10畫素，下邊距20畫素；
padding：5px 10px 20px 30px; 4個值，上是5畫素右10畫素 下20畫素 左是30畫素 順時針
當給盒子指定了padding值之後，發生了2件事
①內容和邊框有了激勵。添加了內邊距。
②padding也會影響盒子的實際大小。會撐大盒子
解決方案：如果保證盒子跟效果圖大小保持一致，則讓width/height減去多出來的內邊距大小即可。
如果盒子本身沒有指定width/height屬性，則此時padding不會撐開盒子大小。

1.7 外邊距（margin）
margin屬性用於設定外邊距，即控制盒子和盒子之間的距離。
屬性 作用
margin-left 左外邊距
margin-right 右外邊距
margin-top 上外邊距
margin-buttom 下外邊距
margin跟padding簡寫一致
1.8 外邊距典型應用
外邊距可以讓塊級盒子水平居中，但必須滿足兩個條件：
①盒子必須指定寬度（width）。
②盒子左右外邊距都設定為auto。
.header{ width:960px;margin:0 auto;}
常見寫法：
①margin-left:auto;margin-right auto；
②margin：auto；
③margin：0 auto；（常用）
以上方法是讓塊級元素水平居中，行內元素或者行內塊元素水平居中給其父元素新增 text-align：center即可
1.9 外邊距合併
使用margin定義塊元素的垂直外邊距時，可能會出現外邊距的合併
1.9.1 相鄰塊元素垂直外邊距的合併
當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距 margin-buttom，下面的元素有上外邊距margin-top，則他們之間的垂直間距不是margin-bottom和margin-top之和，取兩個值中的較大者這種現象被稱為相鄰塊元素垂直外邊距的合併。
1.9.2巢狀塊元素垂直外邊距的塌陷。
對於兩個巢狀關係（父子關係）的塊元素，父元素有上外邊距同時子元素也有上外邊距，此時父元素會塌陷較大的外邊距。
解決方案：
①可以為父元素定義上邊框
②可以為父元素定義上邊距
③可以為父元素新增overflow:hidden
1.10 清除內外邊距
網頁元素很多都帶有預設的內外邊距，而且不同瀏覽器的預設也不同，因此我們在佈局，首先要清除下網頁元素的內外邊距。
*{
padding：0；
margin：0；
}
行內元素為了照顧間距性，儘量只設置左右內外邊距，不要設定上下內外邊距，但是轉換為塊級和行內塊元素就可以了

二，PS 基本操作
因為網頁美工大部分效果圖利用PS（photoshop）來做的，所以以後我們大部分切圖工作都是在PS裡面完成。