入門：CSS引入方式
1、內嵌式：css寫在style標簽中
style標簽雖然可以寫在頁面任意位置，但是通常約定卸載head標簽中
2、外聯式：CSS寫在一個單獨的.css文件中
需要通過link標簽在網頁中引用
3、行內式：CSS寫在標簽的style屬性中
配合js使用
| 引入方式 | 書寫位置 | 作用范圍 | 使用場景 |
|---|---|---|---|
| 內嵌式 | css寫在style標簽中 | 當前網頁 | 小案例 |
| 外聯式 | css寫在單獨的.css文件中，通過link標簽引入 | 多個頁面 | 項目開發 |
| 行內式 | css寫在標簽的style屬性中 | 當前標簽 | 配合js使用 |
注意：局部會覆蓋全局
外聯式相當於全局定義，行內式相當於局部定義
基礎選擇器
選擇器的作用
選擇頁面中對應的標簽(找她)，方便后續設置樣式(改她)
標簽選擇器
結構：標簽名{css屬性名:屬性值；}
作用：通過標簽名，找到頁面中所有這類標簽，設置樣式
注意點：
1、標簽選擇器選擇的是一類標簽，而不是單獨某一個
2、標簽選擇器無論嵌套有多深，都能找到對應的標簽
類選擇器
結構：.類名{css屬性名:屬性值；}
作用：通過類名，找到頁面中所有帶有這個類名的標簽，設置樣式
注意點：
1、所有標簽上都有class屬性，class屬性的屬性值成為類名(類似於名字)
2、類名由數字、字母、下划線、中划線組成，但不能以數字或者划線開頭
3、一個標簽可以同時有多個類名，類名之間以空格隔開
4、類名可以重復，一個類選擇器可以同時選中多個標簽
id選擇器
結構：#id屬性值{css屬性名:屬性值；}
作用：通過id屬性值，找到頁面中帶有這個id屬性值的標簽，設置樣式
注意點：
1、所有標簽上都有id屬性
2、id屬性值類似於身份號碼，在一個頁面中是唯一的，不可重復。
3、一個標簽上只能有一個id屬性值
4、一個id選擇器只能選中一個標簽
類和id的區別
class類名與id屬性值的區別：
class類名相當於姓名，可以重復，一個標簽可以同時有多個class類名
id屬性值相當於身份證號碼，不可重復，已給標簽只能有一個id屬性值
css書寫類選擇器和id選擇器的區別：
類選擇器以 . 開頭
id選擇器以 # 開頭
實際開發的情況
類選擇器用的多
id選擇器配合js使用，除非特殊情況，否則不要使用id設置樣式
實際開發中會遇到冗余代碼的抽取（可以將一些公共的代碼抽取到一個公共的類中去）
通配符選擇器
結構：*{css屬性名:屬性值；}
作用：找到頁面中所有的標簽，設置樣式
注意點：
1、開發中極少使用通配符選擇器，只會在特殊情況下才會使用
2、用於去除標簽中默認的margin和padding
字體和文本樣式
1、字體樣式
1.字體大小：font-size
2.字體粗細：font-weight
3.字體樣式：font-style
4.字體類型：font-family
5.字體類型：font屬性連寫
2、文本樣式
3、line-height行高
字體大小
屬性名：font-size
取值：數字+px
注意點：
谷歌瀏覽器默認文字大小是16px
單位需要設置，否則無效
字體粗細
屬性名：font-weight
取值：
關鍵字
| 加粗 | bold |
|---|---|
| 正常 | normal |
純數字：100-900的整百數：
| 加粗 | 700 |
|---|---|
| 正常 | 400 |
注意點：
不是所有字體都提供了九種粗細，因此部分取值頁面中無變化
實際開發中：正常、加粗兩種取值使用最多
字體樣式(是否傾斜)
屬性名：font-style
取值：
正常(默認值)：normal
傾斜：italic
字體類型：
常見字體系列
2.4.1 無襯線字體（sans-serif）
1、特點：文字筆畫粗細均勻，並且首尾無筆鋒裝飾
2、場景：網頁中大多采用無襯線字體
3、常見該系列字體：黑體、Arial
2.4.2 襯線字體(serif)
1、特點：文字壁畫粗細不均，並且首尾有筆鋒裝飾
2、場景：報刊書籍中應用廣泛
3、常見該系列字體：宋體、Times New Roman
2.4.3 等寬字體(monospace)
1、特點：每個字母或文字的寬度相等
2、場景：一般用於程序代碼編寫，有利於代碼的閱讀和編寫
3、常見該系列字體：Consolas、fira code
字體相關屬性連寫
屬性名：font
取值：
font：style weight size family
順序要求：
swsf
省略要求
只能省略前兩個，如果省略了相當於設置默認值
注意：如果需要同時設置單獨和連寫形式
1、要么把單獨的樣式寫在連寫的下面
2、要么把單獨的樣式寫在連寫的里面
樣式的層疊問題
給同一個標簽設置了相同的樣式，此時樣式會層疊（覆蓋），寫在下面的會生效
Tips
1、css層疊樣式表
2、所謂層疊就是疊加的意思，表示樣式可以一層一層的層疊覆蓋
文本和文本樣式
使用字體和文本相關樣式修改元素外觀樣式
1、字體樣式
2、文本樣式
2.1文本縮進：text-indent
2.2文本水平對齊方式：text-align
2.3文本修飾：text-decoration
3.line-height行高
文本縮進（首行縮進）
屬性名：text-indent
取值：
數字+px
數字+em（推薦：1em=當前標簽的font-size的大小）
文本水平對齊方式
屬性名：text-align
取值：
| 屬性值 | 效果 |
|---|---|
| left | 左對齊 |
| center | 居中對齊 |
| right | 右對齊 |
注意：
如果需要讓文本水平居中，rext-align屬性給文本所在標簽（文本的父元素）設置
文本修飾
屬性名：text-decoration
取值：
| 屬性值 | 效果 |
|---|---|
| underline | 下划線 |
| line-through | 刪除線 |
| overline | 上划線 |
| none | 無裝飾線 |
注意：開發中會使用text-decoration ：none；來清除a標簽默認的下划線
水平居中方法總結 text-align：center
text-align：center 能讓文本、span標簽、a標簽、input標簽、img標簽水平居中
margin:0 auto 讓 div 、p標簽、h標簽水平居中
注意：
1、如果要讓 dic、p、h(大盒子)水平居中，直接給當前元素本身設置計科
2、margin一般針對有固定寬度的盒子，如果大盒子沒有設置寬度，此時會默認占滿父元素的寬度
行高
作用：控制行間距（給一行上下怎加間距）
屬性名：line-height
取值：
數字+px
倍數（當前標簽font-size的倍數）
應用：
1、讓單行文本垂直居中可以設置 line-height：文字父元素高度
2、網頁精准布局時，會設置 line-height ：1 可以取消上下間距
行高與font連寫的注意點：
1、如果同時設置了行高和font連寫，注意覆蓋問題
2、font:style weight size/line-height family
Chrome調試工具
能夠認識Chrome調試工具的基礎操作，能夠使用Chrome調試工具修改和調試樣式
1 打開方式
右擊-->檢查
2 選擇元素
3 控制樣式
4 特殊情況
進階選擇器
后代選擇器：空格
作用：根據HTML標簽的嵌套關系，選擇父元素 后代中 滿足條件的元素
選擇器語法：.father 選擇器1 選擇器2 選擇器3{css}
結果：在father標簽下所找到的后代標簽（兒子、孫子、、、）中，找到滿足選擇器2 選擇器3的標簽，設置樣式（滿足條件：即有選擇器2 也有選擇器3）
注意點：
1、后代包括：兒子、孫子、重孫子、、、
2、后代選擇器中，選擇器與選擇器之間通過 空格 隔開
子代選擇器：>
作用：根據HTML標簽的嵌套關系，選擇父元素 子代中 滿足條件的元素
選擇器語法：選擇器1 > 選擇器2{css}
結果：在選擇器1中所找到的標簽的子代(兒子)中，找到滿足選擇器2的標簽，設置樣式
注意：
1、子代只包括：子一代（兒子） 2、子代選擇器中，選擇器與選擇器之前通過 > 隔開
並集選擇器 ，
作用：同時選擇多組標簽，設置相同的樣式
選擇器語法：選擇器1 ， 選擇器2{css}
結果：
找到選擇器1 和選擇器2 選中的標簽，設置樣式
注意點：
1、並集選擇器中的每組選擇器之間通過 ， 分隔
2、並集選擇器中的每組選擇器可以是基礎選擇器也可以是復合選擇器
3、並集選擇器中的每組選擇器通常一行寫一個，提高代碼的可讀性
交集選擇器 緊挨着
作用：選中頁面中 同時滿足 多個選擇器的標簽
選擇器語法：選擇器1選擇器2{css}
結果：
既又原則：找到頁面中既能被選擇器1選擇，又能被選擇器2選中的標簽
注意點：
1、交集選擇器中的選擇器之間是緊挨着的，沒有東西分隔
2、交集選擇器中如果有標簽選擇器，標簽選擇器必須寫在最前面
emmet語法
作用：通過簡寫語法，快速生成代碼
語法：
類似於選擇器的寫法：(非常好用)
| 記憶 | 示例 | 效果 |
|---|---|---|
| 標簽名 | div | < div></ div> |
| 類選擇器 | .red | < div class="red"></ div> |
| id選擇器 | #one | <div id="one”>< div> |
| 交集選擇器 | p.red#one | < p class="red" id="one"></ p> |
| 子代選擇器 | ul>li | < ul>< li></ li></ ul> |
| 內部文本 | ul>li{我是li的內容} | < ul>< li>我是li的內容</ li></ ul> |
| 創建多個 | ul>li*3 | < ul>< li></ li>< li></ li>< li></ li></ ul> |
hover偽類選擇器
作用：選中鼠標 懸停 在元素上的狀態，設置樣式
選擇器語法：選擇器:hover{css}
注意點：
1、偽類選擇器選中的元素的某種狀態
背景相關屬性
能夠使用 背景相關屬性 裝飾元素樣式
背景顏色
屬性名：background-color(bgc)
屬性值：
顏色取值：關鍵字、rgb表示法、rgba表示法、十六進制。。。
注意點：
背景顏色默認值是透明：rgba（0,0,0,0）、transparent
背景顏色不會影響盒子大小，而且還能看清盒子的大小和位置，一般在布局中會習慣獻給盒子設置背景顏色
背景圖片
屬性名：background-image(bgi)
屬性值：background-image:url('圖片路徑')
注意點：
背景圖片中url中可以省略引號
背景圖片默認是在水平和垂直方向上平鋪的（圖片小於盒子大小則會垂直水平方向平鋪數個圖片，直到鋪滿盒子，圖片大於盒子大小則會只顯示盒子大小的范圍背景）
背景圖片僅僅是指給盒子起到裝視效果，類似於背景顏色，是不能撐開盒子的
背景平鋪
屬性名：background-repeat(bgr)
屬性值：
| 取值 | 效果 |
|---|---|
| repeat | (默認值)水平和垂直方向都平鋪 |
| no-repeat | 不平鋪 |
| repeat-x | 沿着水平方向(x軸)平鋪 |
| repeat-y | 嚴重垂直方向(y軸)平鋪 |
背景位置
屬性名：background-position(bgp)
屬性值：background-position：水平方向位置 垂直方向位置；
屬性值：
1、方位名詞(最多只能表示9個位置)
水平方向：left、center、right
垂直方向：top、center、bottom
組合：left top、right top、left bottom、right bottom、center bottom、
left center、right center、center center、center top、
2、數字+px(坐標)
坐標系：
原點(0,0)：盒子的左上角
x軸：水平向右
y軸：垂直向下
操作：將圖片左上角與坐標點重合即可
注意點：方位名詞取值和坐標取值可以混合使用，第一個取值表示水平，第二個取值表示垂直(顛倒順序也行)
背景相關屬性連寫
屬性名：background（bg）
屬性值：
單個屬性值的合寫，取值之間以空格隔開
書寫順序：
推薦：background：color image repeat position
省略問題：
可以按照需求省略
特殊情況：在pc端，如果盒子大小和背景圖片大小一樣，此時可以直接寫（background:url）
注意點：
如果需要設置單獨的樣式和連寫
1、要么把單獨的樣式寫在連寫的下面
2、要么把單獨的樣式寫在連寫的里面
img標簽和背景圖片的區別
img標簽不設置寬高默認會以原尺寸顯示
div標簽+背景圖片：需要設置div的寬高，因為背景圖片知識裝飾的css樣式，不能撐開div標簽
元素顯示模式
塊級元素
屬性：display：block
顯示特點：
1、獨占一行（一行只能顯示一個）
2、寬度默認是父元素的寬度，高度默認是由內容撐開
3、可以設置寬度
代表標簽：
div、p、h系類、ul、li、dl、dd、form、header、nav、footer
行內元素
屬性：display：inline
顯示特點：
1、一行可以顯示多個
2、寬度和高度默認由內容撐開
3、不可以設置寬高
代表標簽：
a、span、b、u、i、s、strong、ins、em、del。。。
行內塊元素
屬性：display：inline-block
顯示特點：
1、一行可以顯示多個
2、可以設置寬高
代表標簽：
input、textarea、button、select。。。
特殊情況：img標簽有行內塊元素特點，但是Chrome調試工具中顯示的結果是inline
（img標簽一行可以顯示多個且能設置寬高，符合行內塊元素特征）
元素顯示模式轉換
目的：改變元素默認的顯示特點，讓元素符合布局要求
語法：
| 屬性 | 效果 | 使用頻率 |
|---|---|---|
| display：block | 轉換成塊級元素 | 較多 |
| display：inline-block | 轉換成行內塊元素 | 較多 |
| display：inline | 轉換成行內元素 | 極少 |
HTML嵌套規范注意點
1、塊級元素一般作為大容器，可以嵌套：文本、塊級元素、行內元素、行內塊元素等等等
但是：p標簽中不要嵌套 div、p、h等塊級元素
2、a標簽內部可以嵌套任意元素，但是a標簽不能嵌套a標簽
CSS三大特性
認識css的繼承和層疊特性，會計算css的優先級權重的比較
繼承性
特性：子元素有默認繼承父元素樣式的特點（子承父業）
可以繼承的常見屬性：
1、color
2、font-style、font-weight、font-size、font-family
3、text-indent、text-align
4、line-height
5、...
注意點：可以通過調試工具判斷樣式是否可以繼承
繼承的好處：可以在一定程度上減少代碼量
常見應用場景：
1、可以直接給ul設置list-style:none 屬性，從而去除列表默認的小圓點樣式
2、直接給body標簽設置同意的font-size，從而同意不同瀏覽器默認文字大小等
繼承失效的特殊情況：如果元素有瀏覽器默認樣式，此時繼承性依然存在，但是優先顯示瀏覽器的默認樣式：
1、a標簽的color會繼承失效
2、h系列標簽的font-size會繼承失效
3、div的高度不能繼承，但是寬度有類似於繼承的效果(並不是繼承，div寬度是由於顯示特性（默認獨占一行）造成的)
層疊性
特性：
1、給同一個標簽設置不同的樣式-->此時樣式會層疊疊加-->會共同作用在標簽上
2、給同一個標簽設置形同的樣式-->此時樣式會層疊覆蓋-->最終寫在后面的樣式會生效(局部覆蓋全局，后面覆蓋前面)
注意點：
1、當樣式沖突時，只有當選擇器優先級相同時，才能通過層疊性判斷結果（類名）
優先級
特性：不同選擇器具有不同的優先級，優先級高的選擇器樣式會覆蓋優先級低的選擇器樣式
優先級公式：
繼承<通配符選擇器<標簽選擇器<類選擇器<id選擇器<行內樣式<!important
注意點：
1、!important寫在屬性值的后面，分號的前面！
2、!important不能提升繼承的優先級，只要是繼承，優先級最低！
3、實際開發中不建議使用!important
PxCook的基本使用
目標：能夠使用PxCook工具測量設計圖的尺寸和顏色，能夠從psd文件中直接獲取數據
盒子模型
盒子模型的介紹
盒子的概念：
1、頁面中的每一個標簽，都可以看做是一個盒子，通過盒子的視角更方便經行布局
2、瀏覽器在渲染(顯示)網頁時，會將網頁中的元素看作是一個個的矩形區域，我們也形象的稱之為盒子
盒子模型：
css中規定盒子分別由：內容區域(content)、內邊距區域(padding)、邊框區域(border)、外邊距區域(margin)構成，這就是盒子模型
記憶：可以聯想現實中的包裝盒
內容區域的寬度和高度
屬性：width/height
注意：width和height屬性默認設置是盒子 內容區域(content) 的大小
常見取值：數字+px
邊框(border)
作用：設置邊框粗細、邊框樣式、邊框顏色效果
單個屬性：
| 作用 | 屬性名 | 屬性值 |
|---|---|---|
| 邊框粗細 | border-width | 數字+px |
| 邊框樣式 | border-style | 實線solid、虛線dashed、點線dotted |
| 邊框顏色 | border-color | 顏色選取 |
內邊距(padding)
屬性名：padding
作用：設置 邊框 與 內容區域 之間的距離
常見取值：
| 取值 | 示例 | 含義 |
|---|---|---|
| 一個值 | padding：10px | 上下左右都設置為10px |
| 兩個值 | padding：10px 20px | 上下設置為10px，左右設置為20px |
| 三個值 | padding：10px 20px 30px | 上設置為10px，左右設置為20px，下設置為30px |
| 四個值 | padding：10px 20px 30px 40px | (順時針賦值)上：10、右：20、下：30、左：40 |
賦值規則：按順時針方向從上開始賦值，沒有賦值的看他對面的值
外邊距(margin)
作用：設置邊框以外，盒子與盒子之間的距離
屬性名：margin
常見取值：
| 取值 | 示例 | 含義 |
|---|---|---|
| 一個值 | margin：10px | 上下左右都設置為10px |
| 兩個值 | margin：10px 20px； | 上下設置為10px，左右設置為20px |
| 三個值 | margin：10px 20px 30px； | 上設置為10px，左右設置為20px，下設置為30px |
| 四個值 | margin：10px 20px 30px 40px； | (順時針賦值)上：10、右：20、下：30、左：40 |
賦值規則同內邊距，按順時針方向從上開始賦值，沒有賦值的看他對面的值
margin單方向設置的應用
| 方向 | 屬性 | 效果 |
|---|---|---|
| 水平方向 | margin-left | 讓當前的盒子往右移動 |
| 水平方向 | margin-right | 讓右邊的盒子往右邊移動 |
| 垂直方向 | margin-top | 讓當前的盒子往下移動 |
| 垂直方向 | margin-bottom | 讓下面的盒子往下移動 |
清除默認內外邊距
場景：瀏覽器會默認給部分標簽設置默認的 margin 和padding，但一般在項目開始前需要先清除這些標簽默認的margin和padding，后續自己設置
比如：body標簽默認設置margin：8px
p標簽默認有上下的margin
ul標簽默認有上下的margin和padding-left
。。。
解決方法：
方法一（淘寶解決方案）：通過並集選擇器，統一設置為0：
blockquote,body,button,dd,dl,dt,fieldset,form,he1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{
margin:0;
padding:0;
}
方法二（京東解決方案）：通過通配符選擇器，統一設置為0：<a name="*"></a>
*{
margin:0;
padding:0;
}
注意：方法二不推薦，推薦使用方法一。
外邊距折疊現象：
合並現象
場景：垂直布局的塊級元素，上下的margin會合並(margin-bottom和margin-top合並在一起，而不是疊加 )
結果：最終兩者距離為margin的最大值
解決方法：避免就好，只給其中一個盒子設置margin即可
塌陷現象
場景：互相嵌套的塊級元素，父子元素緊貼的margin-top會合並作用在父元素上
結果：導致父元素一起往下移動
解決方法：
1、給父元素設置border-top 或者 padding-top（分隔父子元素的margin-top）（不推薦）
2、給父元素設置overflow：hidden
3、轉換成行內塊元素
4、設置浮動
行內元素的margin和padding無效情況
場景：給行內元素設置margin和padding時
結果：
1、水平方向的margin和padding布局中有效
2、垂直方向的margin和padding布局中無效
CSS3盒模型自動內減
設置一個屬性，瀏覽器會自動計算多出部分，並在內容區域中自動減去
屬性名：box-sizing
屬性值：border-box
box-sizing：border-box；
不會撐大盒子的特殊情況(塊級元素)
1、如果子盒子沒有設置寬度，此時寬度默認是父盒子的寬度
2、此時給子盒子設置左右的padding或者左右的border，不會撐大盒子（自動內減）
浮動
結構偽類選擇器
目標：能夠使用 結構偽類選擇器 在HTML中定位元素
作用與優勢：
1、作用：根據元素在HTML中的結構關系查找元素
2、優勢：減少對於HTML中類的依賴，有利於保持代碼整潔
3、場景：常用於查找某父級選擇器中的子元素
選擇器：
| 選擇器 | 說明 |
|---|---|
| E:first-child{} | 匹配父元素中第一個子元素，並且是E元素 |
| E:last-child{} | 匹配父元素中最后一個子元素，並且是E元素 |
| E:nth-child(n){} | 匹配父元素中第n個子元素，並且是E元素 |
| E:nth-last-child(n){} | 匹配父元素中倒數第n個子元素，並且是E元素 |
注意：
1、n為：0，1，2，3，4，5，6。。。
2、通過n可以組成常見公式：
3、子元素中必須類型都一致，不能含有其他類型的，不然選不到該其他類型
| 功能 | 公式 |
|---|---|
| 偶數 | 2n，even |
| 奇數 | 2n+1，2n-1，odd |
| 找到前5個 | -n+5（不能寫成5-n） |
| 從第五個往后找 | n+5 |
補充 nth-of-type
選擇器：
| 選擇器 | 說明 |
|---|---|
| E：nth-of-type(n){} | 只在父元素的同類型(E)的子元素范圍中，匹配第n個 |
區別：
nth-child——>直接在所有孩子中數個數
nth-of-type——>先通過該類型 找到符合同類型的一堆子元素，然后在這堆子元素中數個數（不會受到其他類型的標簽影響）
偽元素
目標：能夠使用 偽元素 在網頁中創建內容
偽元素：一般頁面中的非主體內容可以使用偽元素
區別：
1、元素：HTML設置的標簽
2、偽元素：由CSS模擬出的標簽效果
種類：
| 偽元素 | 作用 |
|---|---|
| ：：before | 在父元素內容的最前添加一個偽元素 |
| ：：after | 在父元素內容的最后添加一個偽元素 |
注意點：
1、必須設置content屬性才能生效（content：”我是一個偽元素“；）
2、偽元素默認是行內元素（不能直接設置寬高，可以轉換成塊元素或行內塊元素 display：block；）
塊級元素：從上往下，垂直布局，獨占一行
行內元素、行內塊元素：從左往右，水平布局，空間不夠自動折行
浮動的作用
早期作用：圖文環繞
現在的作用：網頁布局
場景：讓垂直布局的盒子變成水平布局，如：一個在左，一個在右
代碼：
屬性名：float <a name="float"></a>
屬性值：
| 屬性名 | 效果 |
|---|---|
| left | 左浮動 |
| right | 右浮動 |
浮動的特點：
1、浮動元素會脫離標准流（簡稱：脫標），在標准流中不占位置（相當於從地面飄到了空中）
2、浮動元素比標准流高出半個級別，可以覆蓋標准流中的元素
3、浮動找浮動，下一個浮動元素會在上一個浮動元素后面 左右浮動（會飄到同一行）
4、浮動元素會收到上面元素邊界的影響（上面的盒子如果是塊級元素，會獨占一行，那么下面的盒子九無法浮動到上面，如果把上面的元素display屬性改為行內元素或行內塊元素，那么下面浮動的盒子就會飄到上面盒子同一行）
5、浮動元素有特殊的顯示效果
一行可以顯示多個
可以設置寬高(能夠給行內元素設置寬高)
注意點：
浮動的元素不能通過text-align：center或者 margin：0 auto來讓浮動元素本身水平居中（浮動元素里面的內容是可以居中的）
清除浮動帶來的影響
含義：清除浮動帶來的影響
影響：如果子元素浮動了，此時子元素不能撐開標准流的塊級父元素
原因：子元素浮動后脫標-->不占位置，父級元素如果沒有設置寬高，那么默認高度為0，下面的盒子會跑到上面去
目的：需要父元素有高度，從而不影響其他網頁元素的布局
清除方法一——直接設置父元素高度。
優點：簡單粗暴，方便
缺點：有些布局中不能固定父元素高度，如：新聞列表，京東推薦模塊
清除方法二——額外標簽法
操作：
1、在父元素內容的最后添加一個塊級元素，
2、給添加的塊級元素設置 clear：both
缺點：會在頁面中添加額外的標簽，會讓頁面的HTML結構變的復雜，現在實際開發中很少使用了
清除方法三——單偽元素清除法
操作：用偽元素代替了額外標簽
基本寫法：
.clearfix::after{ content:""; display:block; clear:both; }
補充寫法：
.clearfix::after{ content:''; display:block; clear:both; /*補充代碼：在網頁中隱藏偽元素*/ height:0; visibility:hidden; }
優點：項目中使用，直接給標簽加類即可清除浮動
清除方法四——雙偽元素清除法
after:清除浮動
before:解決盒子margin塌陷問題
.clearfix::before, .clearfix::after{ content:''; display:table; } .clearfix::after{ clear:both; }
優點：項目中使用，直接給標簽加類即可清除浮動
也可以解決margin的塌陷問題
清除方法五——給父元素設置overflow
操作：
直接給父元素設置 overflow:hidden
優點：方便
補充 塊級格式上下文(BFC)
塊級格式上下文 是Web頁面的可視CSS渲染的一部分，是盒子的布局過程發生的區域，也是浮動元素與其他元素交互的區域。
創建BFC的方法：
1、html標簽是BFC盒子
2、浮動元素是BFC盒子
3、行內塊元素是BFC盒子
4、overflow屬性取值不是 visible。如 aotu、hidden。。。
.。。。
BFC盒子的創建特點
1、BFC盒子會默認包裹住內部子元素（標准流、浮動），這樣即使父元素不設置高度，包裹住子元素后也會有高度——>應用：清除浮動
2、BFC盒子本身與子元素之間不存在margin的塌陷問題——>應用：解決margin的塌陷
3、。。。
定位+裝飾
定位的基本介紹和使用
1、標准流
1、塊級元素獨占一行——>垂直布局
2、行內元素/行內塊元素一行顯示多個——>水平布局
2、浮動
1、可以讓原本垂直布局的 塊級元素變成水平布局
3、定位
1、可以讓元素自由的擺放在網頁的任意位置
2、一般用於 盒子之間的層疊情況
定位的常見應用場景
1、可以解決盒子與盒子之間的層疊問題
定位之后的元素層級最高，可以層疊在其他盒子上面
2、可以讓盒子始終固定在屏幕中的某個位置
定位的基本使用
針對於盒子與盒子之間的層疊問題，推薦使用定位完成
使用定位的步驟：
1、設置定位方式：
屬性名：position
常見屬性值：
| 定位方式 | 屬性值 |
|---|---|
| 靜態定位 | static |
| 相對定位 | relative |
| 絕對定位 | absolute |
| 固定定位 | fixed |
2、設置偏移值
偏移值設置分為兩個方向，水平和垂直方向格選一個使用即可
選取的原則一般是究竟原則（離哪邊近就用那個）
| 方向 | 屬性名 | 屬性值 | 含義 |
|---|---|---|---|
| 水平 | left | 數字+px | 距離左邊的距離 |
| 水平 | right | 數字+px | 距離右邊的距離 |
| 垂直 | top | 數字+px | 距離上邊的距離 |
| 垂直 | bottom | 數字+px | 距離下邊的距離 |
靜態定位
介紹：靜態定位是默認值，就是之前認識的標准流，可以不寫
代碼：position：static；
注意點：
1、靜態定位就是之前的標准流，不能通過方位屬性經行移動
2、之后說的定位不包括靜態定位，一般特指后幾種：相對，絕對，固定
相對定位
介紹：自戀型定位，相對於自己之前的位置進行移動
代碼：position：relative;
特點：
1、需要配合方位屬性實現移動
2、相對於自己原來位置(沒有移動前)進行移動
3、在頁面中占位置——>沒有脫標
應用場景：
1、配合絕對定位組cp（子絕父相）
2、用於小范圍的移動
絕對定位
介紹：拼爹型定位，相對於非靜態定位的父元素進行移動
代碼：position：absolute；
特點：
1、需要配合方位屬性實現移動
2、默認相對於整個瀏覽器可視區域進行移動（默認）
3、在頁面中不占位置——>已脫標（下面的盒子會補上，占用原本綠盒子的位置）
應用場景：配合絕對定位組cp(子絕父相)
絕對定位相對於誰移動？
1、祖先元素中沒有定位——>默認相對於瀏覽器可視區域進行移動（如：right:0;bottom:0;此時元素在右下角）
2、祖先元素有定位——>相對於 最近的 有定位的 祖先元素進行移動
子絕父相
場景：讓子元素相對於父元素進行自由移動
含義：
子元素：絕對定位
父元素：相對定位
子絕父相的好處：
父元素是相對定位，則對網頁布局影響最小（雖然子絕父絕也可以，但是絕對定位是脫標的，所以下面的元素會補位上來，會對網頁布局造成一定的影響）
子絕父絕的特殊場景：
場景：在使用子絕父相的時候，發現父元素已經有定位了，此時直接子絕即可！
原因：父元素已經有滿足要求，如果盲目修改父元素定位方式，可能會影響之前寫好的布局
子絕父相水平垂直都居中案例
1、先設置子絕父相，讓子元素在父元素中自由移動；子元素：position: absolute; 父元素：position: relative;
2、先讓子盒子往右移動父盒子寬度的一半
left：50%；（left和margin-left 數字+% 都是相對於父盒子移動的）
3、再讓子盒子往左移動自己寬度的一半
普通做法：margin-left：負的子盒子寬度的一半
缺點：子盒子寬度發生改變時需要重新改代碼
優化做法：使用transform
transform：translateX(-50%) ：表示沿着X軸負方向(向左)始終移動自己寬度的一半距離，
transform：translateY(-50%) ： 表示沿着Y軸負方向(向上)移動自己寬度的一半距離
注意：不能同時寫 transform：translateX(-50%)；transform：translateY(-50%)；這樣寫在下面的就會覆蓋掉上面的屬性，可以連寫：transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
表示沿着X軸負方向(向左)始終移動自己寬度的一半距離，再沿着Y軸負方向(向上)移動自己寬度的一半距離，這樣就完成了子盒子在父盒子水平垂直都居中的案例
###
固定定位
介紹：死心眼型定位，相對於瀏覽器進行定位移動
代碼：position:fixed;
特點：
1、需要配合方位屬性實現移動
2、相對於瀏覽器可視區域進行移動
3、在頁面中不占位置——>已脫標
應用場景：讓盒子固定在屏幕中的某個位置，如 頭部標題 側邊欄
元素的層級關系
不同布局方式元素的層級關系
標准流 < 浮動 < 定位
不同定位之間的層級關系
相對、絕對、固定默認層級相同
此時HTML中寫在下面的元素層級更高，會覆蓋上面的元素
更改定位元素的層級
場景：改變定位元素的層級
屬性名：z-index
屬性值：數字
數字越大，層級越高
裝飾
認識基線
基線：瀏覽器文字類型元素排版中存在用於對齊的基線（baseline）
文字對齊問題
場景：解決行內/行內塊元素垂直對齊問題
問題：當圖片和文字在一行中顯示時，其實底部是不對齊的
屬性名：vertical-align
屬性值：
| 屬性值 | 效果 |
|---|---|
| baseline | 默認，基線對齊 |
| top | 頂部對齊 |
| middle | 中部對其 |
| bottom | 底部對齊 |
vertical-align 可以解決的問題：
1、解決行內元素和行內塊元素同一行時高度不一致，沒有完全對齊問題（如：文本框text和表單按鈕button 無法對齊），也可以設置浮動（float）解決
2、input 和 img 無法對齊問題
3、div中的文本框，默認無法貼頂問題（input 標簽垂直對齊方式有關）
4、div標簽不設高度由img標簽撐開，此時img標簽下面會存在額外間隙問題（因為默認圖片會和文字基線對齊，解決方法一：設置垂直對齊方式：vertical-align：bottom 方法二：轉換成塊級元素 display：block）
5、使用line-height讓img標簽垂直居中問題
光標類型
場景：設置鼠標光標在元素上時顯示的樣式
屬性名：cursor
常見屬性：
| 屬性值 | 效果 |
|---|---|
| default | 默認值，通常是箭頭 |
| pointer | 小手效果，提示用戶可以點擊 |
| text | 工字型，提示童虎可以選擇文字 |
| move | 十字光標，提示用戶可以移動 |
邊框圓角
邊框圓角效果
場景：讓盒子四個角變得圓潤，增加頁面細節，提升用戶體驗
屬性名：border-radius
常見取值：數字+px、百分比
原理：
賦值規則：從左上角開始賦值，然后順時針賦值，沒有賦值的看對角！
邊框圓角和膠囊按鈕
畫一個正圓：
1、盒子必須為正方形（長方形的話設置border-radius：50%后會變成橢圓形）
2、設置邊框圓角為盒子高度的一半：border-radius：50%；
膠囊按鈕：
1、要求盒子必須為長方形
2、設置 border-radius：盒子高度的一半：
溢出部分顯示效果 overflow
溢出部分：指的是盒子 內容部分 所超出盒子范圍的區域
場景：控制內容溢出部分的顯示效果，如:顯示，隱藏，滾動條。。。
屬性名：overflow
常見屬性：
| 屬性值 | 效果 |
|---|---|
| visible | 默認值，溢出部分可見 |
| hidden | 溢出部分隱藏 |
| scroll | 無論是否溢出，都顯示滾動條 |
| auto | 根據是否溢出，自動顯示或隱藏滾動條 |
元素本身隱藏
場景：讓某元素本身在屏幕中不可見。如 鼠標：hover之后元素隱藏
常見屬性：
1、visibility：hidden
2、display：none
區別：
1、visibility：hidden 隱藏元素本身，並且在網頁中 占位置
2、display: none 隱藏元素本身，並且在網頁中 不占位置
注意點：
開發中經常會通過 display 屬性完成元素的顯示隱藏切換
display：none （隱藏）、display：block（顯示）
補充
元素整體透明度
場景：讓某元素整體（包括內容）一起變透明
屬性名：opacity
屬性值：0-1之間的數字
1：表示完全不透明
0：表示完全透明
注意點：
對比 rgba(255,0,0,0.2)，不包括
opacity 會讓元素整體變透明，包括里面的內容，如：文字、子元素、圖片等
（而rgba只會改變背景顏色的透明度）
邊框合並
場景：讓相鄰表格邊框進行合並，得到細線邊框效果
代碼：border-collapse：collapse
選擇器拓展
目標：能夠使用 偽類選擇器 選擇元素的不同狀態
鏈接偽類選擇器
場景：常用於選中超鏈接的不同狀態
選擇器語法：
| 選擇器語法 | 功能 |
|---|---|
| a:link{} | 設置a鏈接 未訪問過 的狀態（默認訪問過為紫色） |
| a:visited{} | 設置a鏈接 訪問之后 的狀態 |
| a:hover{} | 設置 鼠標懸停 的狀態 |
| a:active{} | 設置 鼠標按下 的狀態 |
注意點：
如果需要同時實現以上四種偽類狀態效果，需要從上到下按照 LVHA 順序書寫，否則可能會不生效
補充（面試題）：用CSS畫出三角形技巧
場景：在網頁中展示出小三角形時，除了可以使用圖片以外，還可以使用代碼完成
實現原理：利用盒子邊框完成
實現步驟：
1、設置一個盒子
2、設置四周不同顏色的邊框
3、將盒子寬度高度設置為0，僅保留邊框
4、得到四個三角形，選擇其中一個后，其他三角形（邊框）設置顏色透明
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 0rem;
height: 0rem;
/* */
border-top: 100px solid transparent;
border-right: 160px solid transparent;
border-bottom: 100px solid transparent;
border-left: 160px solid red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
焦點偽類選擇器
場景：用於選中元素獲取焦點時狀態，常用於表單控件
選擇器語法：
input：focus{ background-color：skyblue； }
效果：表單控件獲取焦點時默認會顯示外部輪廓線
屬性選擇器
場景：通過元素上的HTML屬性來選擇元素，常用於選擇input標簽
選擇器語法：
| 選擇器 | 功能 |
|---|---|
| E[attr] | 選擇具有arrt屬性的E元素 |
| E[attr=”val“] | 選擇具有 attr 屬性並且屬性值等於 val的 E元素 |
CSS樣式補充
目標：能夠 使用精靈圖 ，能夠給元素 添加陰影效果 ，能夠讓元素完成 過渡效果
精靈圖
場景：項目中將多張小圖片，合並成一張大圖片，這張大圖片稱之為精靈圖
優點：減少服務器發送次數，減輕服務器的壓力，提高頁面加載速度
精靈圖的使用：
1、創建一個盒子
2、通過PxCook量取小圖片大小，將小圖片的寬高設置給盒子
3、將精靈圖設置為盒子的背景圖片
4、通過PxCook測量小圖片左上角坐標，分別取 負值 設置給盒子的background-position:x y
背景圖片大小
作用：設置背景圖片的大小，
語法：background-size：寬度 高度；
取值：
| 取值 | 場景 |
|---|---|
| 數字+px | 簡單方便，常用 |
| 百分比 | 相對於當前盒子自身的寬高百分比 |
| contain | 包含，將背景圖片等比例縮放，直到 不會超出盒子的最大（可能會有留白） |
| cover | 覆蓋，將背景圖片等比例縮放，直到 剛好填滿整個盒子 沒有留空白（超出部分不顯示） |
background連寫拓展
完整連寫：background：color image repeat position/size
注意點：
background-size和background連寫同時設置時，需要注意覆蓋問題（background寫在上，background-size寫在下面，因為連寫background時候雖然沒有寫size，但是會有默認大小）
解決：
1、單獨的樣式寫在連寫的下面
2、單獨的樣式寫在連寫的里面
文字陰影
作用：給文字添加陰影效果，吸引用戶注意
屬性名：text-shadow
取值：
| 參數 | 作用 |
|---|---|
| h-shadow | 必須，水平偏移量，允許負值 |
| v-shadow | 必須，垂直偏移量，允許負值 |
| blur | 可選，模糊度 |
| color | 可選，陰影顏色 |
拓展 ：
陰影可以疊加設置，每組陰影取值之間以逗號隔開
盒子陰影
作用：給盒子添加陰影效果，吸引用戶注意，體現頁面的制作細節
屬性名：box-shadow
取值：
| 參數 | 作用 |
|---|---|
| h-shadow | 必須，水平偏移量，允許負值 |
| v-shadow | 必須，垂直偏移量，允許負值 |
| blur | 可選，模糊度 |
| color | 可選，陰影顏色 |
| spread | 可選，陰影擴大 |
| inset | 可選，將陰影改為內部陰影 |
過渡
作用：讓元素的樣式慢慢的變化，常配合hover使用，增強網頁交互體驗
屬性名：transition
常見取值：
| 參數 | 取值 |
|---|---|
| 過渡的屬性 | all：所有能過渡的屬性都能過渡，具體屬性如：width：只有width有過渡 |
| 過渡的時長 | 數字+s（秒） |
注意點：
1、過渡需要：默認狀態和hover狀態樣式不同，才能有過渡效果
2、transition屬性給需要過渡的元素本身添加
3、transition屬性設置在不同狀態中，效果會不同：
①給默認狀態設置，鼠標移入移出都會有過渡效果
②給hover狀態設置，鼠標移入有過渡效果，移出沒有過渡效果