目錄
## 五、行內塊之間的空白距離和下方多出的空白（水平和垂直方向有空白）
## 一、狀態僞類（鏈接）a 標籤
```
a:link{ // 鏈接未訪問狀態
color: aqua;
}
a:visited{ // 鏈接訪問過後
color: brown;
}
a:hover{ // 鏈接懸停狀態
color:yellow;
}
a:active{ // 鏈接的激活狀態（鼠標按下）
color: pink;
}
```
- :hover不僅可以表示鏈接的懸停，其他的標籤也可以使用
## 二、盒模型
> css中把每個標籤看作是一個盒子，有四層結構，分別是內容、內邊距（內填充）、邊框、外邊距。
- 1、content 尺寸=width+height
- 2、padding 盒子的邊緣和內容之間的距離,這段距離會顯示背景，不會顯示內容
- 3、border 邊框是指盒子邊緣的線條
- 4、margin 是指盒子和相鄰元素或者父元素之間的距離
```
padding-top/bottom/left/right
boder-top/bottom/left/right
margin-top/bottom/left/right
margin:0 auto; /*塊元素水平居中*/
邊框簡寫屬性 border:border-width border-style border-color
border:30px solid black;
border-right: 0; /*去掉邊框兩種寫法*/
border-left: none;
```
```
內邊距：
padding:10px; 上下左右四個方向內邊距相同
padding:10px 20px; 上下 左右
padding:10px 20px 30px; 上 左右 下
padding:10px 20px 30px 40px; 上 右 下 左
邊框：
border-width:2px; 設置邊框寬度
border-style:solid;設置邊框風格
solid/dashed/dotted/double 實/虛/點/雙實線
border-color:red; 設置邊框顏色
border-top-width: 2px; 設置上邊框的寬度
border-top-style: solid; 設置上邊框的風格
border-top-color: yellow; 設置上邊框的顏色
bottom、left、right三個方向和top同理
外邊距：
margin:10px; 上下左右四個方向外邊距相同
margin:10px 20px; 上下 左右
margin:10px 20px 30px; 上 左右 下
margin:10px 20px 30px 40px; 上 右 下 左
margin:0 auto; 水平居中
* margin可以設置負值，可以通過負值減少元素的佔位，比如margin-top爲負值（-50px），元素垂直方向會往上移動，並且減少50px的佔位
```
## 三、垂直外邊距合併問題
### 1、垂直方向margin-top傳遞問題(父子關係)
- 當父元素沒有padding\border\float\position\overflow時，給子元素設置margin-top會把父元素一塊兒帶下來即父元素也會有margin-top
- 解決:
- 給父元素添加1px的上padding或者border,子元素margin-top少1px
- 可以用父元素的padding-top實現同樣式的效果
### 2、相鄰元素的外邊距合併（兄弟關係）
- 兩同級標籤，上一個設置margin-bottom:40px,下一個設置margin-top:60px，最後兩者之間的外邊距會合併爲數值較大的那個值(60px)，不是數值相加(100px)
## 四、盒子類型轉換
- display:block; 設置成塊級標籤
- display:inline; 設置成行內標籤
- display:inline-block; 設置成行內塊級標籤
- display:none; 隱藏元素,頁面上不顯示也不佔位
## 五、行內塊之間的空白距離和下方多出的空白（水平和垂直方向有空白）
- 解決方案：
- 給父元素設置font-size:0;line-height:0;
- 給子元素重新設置font-size和line-height
## 六、CSS三大特性
- 1、層疊性
> 瀏覽器處理樣式衝突的一種能力
樣式不衝突不層疊
樣式衝突，以最後定義的爲準（就近原則）
- 2、繼承性
> 子元素可以使用父元素的某些樣式，比如文本、字體相關，只要給父級設置，子元素默認值和父級一樣
> 恰當使用繼承，可以降低代碼的複雜度
- 以下屬性默認繼承：
```
text-align
text-indent
text-decoration
color
font-size
font-family
font-style
font-weight
line-height
letter-spacing
word-spacing
```
- 其他屬性通過inherit這個值可以實現手動繼承
```
width:inherit;
border:inherit;
```
> 注意： 塊級元素width不是默認繼承，背景顏色background-color默認是透明也不是繼承
> 注意： a標籤的顏色和文本修飾默認不會繼承，需要選中a標籤才能修改
- 3、優先級
> 行內樣式優先級最高
- 基本選擇器的權值，權值越大，優先級越高
```
選擇器 權值
*（通配符） 0
tagName（標籤選擇器） 1
.class（類選擇器）\僞類 10
#id (ID選擇器) 100
行內樣式 1000
```
- 複合選擇器的權值多數情況把組成這個複合選擇器的基本選擇器的權值相加 (特殊情況：羣組選擇器是單個計算不會疊加)
- 選擇器權值相同，後定義生效
```
後代 .box div (10 + 1 = 11)
子代 .box>div (10 + 1 = 11)
羣組 h1,.box 不會相加，單個計算 h1 1 .box 10
交集 div.box (1 + 10 = 11)
```
- 特殊情況：!important 命令可以把樣式優先級提升最高，比行內樣式優先級更大，不推薦使用加入到代碼中。
## 七、垂直對齊
- vertical-align
- baseline 默認值，基線對齊
- middle 中線對齊
- top 頂部對齊
- bottom 底部對齊
1、圖片和文字中線對齊，給圖片設置vertical-align:middle;
```
css:
.box img{
width:150px;
vertical-align: middle;
}
html:
<div class="box">
文字pgP
<img src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top-e3b63a0b1b.png" alt="">
</div>
```
2、行內元素中線對齊，給兩個行內元素都設置vertical-align:middle;
```
css：
.span1,.span2{
background-color: red;
vertical-align: middle;
}
.span1{
font-size: 30px;
}
html:
<span class="span1">span1</span>
<span class="span2">span2</span>
```
3、行內塊元素中線對齊，給兩個行內塊都設置 vertical-align:middle;
```
css：
.span3,.span4{
display: inline-block;
width: 100px;
height: 100px;
background-color: yellow;
vertical-align: middle;
}
html:
<span class="span3">span3</span>
<span class="span4">span4 <br> span44</span>
```
## 八、浮動
>佈局方式：文檔流、浮動佈局、層佈局（定位）
>文檔流：元素按照本身的屬性在頁面排列，塊從上往下，行內從左往右
1、左浮動 float:left;
- 左浮動的元素會盡可能往左走，直到碰到父元素或者相鄰浮動元素的邊緣停下來
- 脫離文檔流，不佔位
- 多個左浮動的元素從左到右依次排列
2、右浮動 float:right;
- 右浮動的元素會盡可能往右走，直到碰到父元素或者相鄰浮動元素的邊緣停下來
- 脫離文檔流，不佔位
- 多個右浮動的元素從右到左依次排列
3、取消浮動 float:none;
- 回到文檔流佔位
> 補充： 浮動的元素脫離文檔流之後，可以覆蓋文檔流內的元素，但是文字和圖片以及表單元素不會被覆蓋，會圍繞浮動元素排列
## 九、清除浮動
- 解決浮動元素脫離文檔流之後無法撐開父級高度的問題
- 解決方案：
- 1、給父元素設置height屬性, 代碼的擴展性不好（不方便維護）
- 2、給父元素設置overflow:hidden; 因爲overflow:hidden;本身的效果是會讓元素溢出的部分隱藏掉，所以某些情況無法使用overflow:hidden;
- 3、額外標籤法: 在所有浮動元素之後添加一個不浮動的元素，給其添加clear:both屬性。 會增加結構中的冗餘代碼。
- 4、通過僞元素的方式添加標籤（和額外標籤法原理相同），用法：在樣式表中預先定義好.clearfix類，遇到需要清除浮動的標籤（所有浮動元素的父級），就給其添加上clearfix類名
```
.clearfix::after{
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom:1;
}
```
## 十、overflow 規定元素內容溢出顯示方式
- overflow:visible; 溢出顯示（默認值）
- hidden; 溢出隱藏，多出的部分被直接截斷
- scroll; 始終顯示滾動條區域
- auto; 內容溢出顯示滾動條，內容不溢出就不顯示滾動條
## 十一、僞元素
> 使用場景：一般用來給局部添加一些樣式處理
- ::after 在元素的末尾（內部）添加僞元素
- ::before 在元素的開頭（內部）添加僞元素
## 十二、背景屬性
> background:color image repeat positon;
> 簡寫屬性裏面的各個值得順序可以調整，並且可以省略掉不需要設置的屬性
```
background:blue url("logo.png") no-repeat center;
```
```
背景顏色
background-color:#000;
background-color:transparent; 透明
```
```
背景圖片
background-image:url("...");
```
```
背景重複
background-repeat:
- repeat 默認值，水平和垂直都鋪滿
- repeat-x 水平重複
- repeat-y 垂直重複
- no-repeat 不重複
```
```
背景定位
background-position: 水平 垂直;
- left/center/right top/center/bottom
- x-length y-length ,設px, X正右移負左移， y正數下移負上移
- x-% y-% ,設%,X 0%-最左邊,100%-最右邊,50%表-中間，Y 0%-頂部，100%-底部，50%-中間
背景定位屬性值，如果只設置一個方向，表示另一個方向默認位center
```
> 網頁圖片和背景圖片區別
- 跟網頁內容相關，比較重要的圖片都要使用img標籤添加，比如廣告圖、商品圖、logo圖...
- 跟內容無關，作爲網頁的修飾性的一圖案使用背景圖片，比如紋理、修飾性的小圖標...背景圖片不能撐開元素的尺寸