emmet語法
vscode內(nèi)置emmet語法結(jié)構(gòu)，點擊！+Tab可以生成。想生成什么標簽直接輸入名字。
父子關(guān)系：使用>。
兄弟關(guān)系：使用+。
自動化格式代碼
復(fù)合選擇器
ol li{
?
xxx；
?
}
注意：中間隔開，ol為父類，li為子類。
子元素選擇器（子選擇器）
<style>
nav a{
color:red;
}
</style>
<body>
<div class="nav">
<a href="#">子類1</a> //變紅
<a href="#">子類2</a>
</div>
</body>
并集選擇器
規(guī)范：使用，隔開
<style>
nav1, //并集選擇器適合豎著寫。
a,
.nav2{
color:red;
}
</style>
<body>
<div class="nav1">大哥</div>
<a href="#">兄弟</a>
<div class="nav2">
<a href="#">子類1</a> //變紅
<a href="#">子類2</a>
</div>
</body>
鏈接偽類選擇器
使用：來表示。
鏈接偽類選擇器
-
結(jié)構(gòu)偽類
---- ---- a:link 選擇所有未被訪問的鏈接 a:visited 選擇已被訪問的鏈接 a:hover 選擇鼠標指針位于其上的鏈接 a:active 選擇活動鏈接 順序執(zhí)行：LVHA。
focus偽類選擇器
input：focus{
background-color：yellow；
}
input選取的表單元素。
常見的塊元素
<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
塊級元素的特點：
1.獨占一行。
2.高度，寬度，外邊距以及內(nèi)邊距都可以控制。
3.寬度是默認容器的100%。
4.是一個容器及盒子，里面可以放行內(nèi)或者塊級元素。
注意：文字類的元素內(nèi)不能使用塊級元素。
p、h標簽主要用于存放文字，因此p里面不能放塊級元素。
常見的行內(nèi)元素
<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>
行內(nèi)元素的特點：
1.相鄰行內(nèi)元素在一行上，一行可以顯示多個。
2.高、寬直接設(shè)置無效。
3.默認寬度就是它本身內(nèi)容的寬度。
4.行內(nèi)元素只能容納文本或其他行內(nèi)元素。
行內(nèi)塊元素
<img />、<input />、<td>
它們同時具有塊元素和行內(nèi)元素的特點。
行內(nèi)塊元素的特點：
1.和相鄰行內(nèi)元素（行內(nèi)塊）在一行上，但是他們之間會有空白間隙，一行可以顯示多個。
2.默認寬度就是他本身的內(nèi)容寬度。
3.高度、行高，外邊距以及內(nèi)邊距都難以控制（塊級元素特點）。
元素顯示模式轉(zhuǎn)換
轉(zhuǎn)換為塊元素：display：block；
轉(zhuǎn)換為行內(nèi)元素：display：inline；
轉(zhuǎn)換為行內(nèi)塊：display：inline-block；
文字的垂直居中
當(dāng)height：xxpx；和line-height：xxpx；相等時，可以在盒子中實現(xiàn)垂直居中的效果。
css背景
背景顏色：
background-color：transparent|color（透明|顏色）。
背景圖片（裝飾性小圖片或者是超大的背景圖片，便于控制位置）：
background-image：url(url)|none；
background-repeat|no-repeat|repeat-x|repeat-y
repeat:平鋪|no-repeat:不平鋪|repeat-x:向x軸平鋪|repeat-y：向y軸平鋪
位置控制：
background-position：center top；//水平向上
background-position：right center；//向右水平垂直
注意：與方位名詞順序無關(guān)。
background-position：right；//此時，水平一定是靠右對齊，第二個參數(shù)省略y軸。
background-position：top；//此時，水平一定是向上對齊，第二個參數(shù)省略x軸。
背景固定：
background-attachment：scroll（滾動）|fixed(固定)；
背景復(fù)合寫法：
background：black url（url） repeat-y fixed top；
背景顏色半透明：
background：(0,0,0,0.5);//最后一個參數(shù)是alpha透明度，取值范圍在0-1之間。
css三大特性
層疊性：
div{
color：red；
font-size：;//不會覆蓋掉
}
?
div{
color：yellow；
}
就近原則：下面的就會覆蓋掉上面的，不會全部覆蓋掉，不同的東西不會覆蓋掉。
繼承性：
div{
color:red;
}
?
<div>
<p>aaa</p>
</div>
?
p標簽的顏色會繼承父類div的顏色。
作用：降低css樣式的復(fù)雜性，簡化代碼。
行高的繼承：
father{
color:red;
font:12px(文字大小)/24px(行高)或者1.5倍'Microsoft YaHei';
}
son{
font-size:14px;
1.5*14//當(dāng)前的行高
}
p{
font-size:16px;
1.5*16//當(dāng)前的行高
}
<div class="father">
<div class="son">
<p>aaa</p>
</div>
</div>
優(yōu)先級
選擇器相同，執(zhí)行疊層性。
選擇器不同，根據(jù)權(quán)重執(zhí)行。
| 選擇器 | 選擇器權(quán)重 |
|---|---|
| 繼承或者* | 0,0,0,0 |
| 元素選擇器 | 0,0,0,1 |
| 類選擇器，偽類選擇器 | 0,0,1,0 |
| ID選擇器 | 0,1,0,0 |
| 行內(nèi)樣式，style=“” | 1,0,0,0 |
| ！important 重要的 | 無窮大 |
繼承權(quán)重為0。
css盒子模型
網(wǎng)頁的布局過程：
最重要的一步就是利用盒子的浮動進行布局。
盒子里面的內(nèi)容：
border：邊框
border-width：xxpx；
?
border-style：solid（實線邊框）|dotted（點線）|dashed（虛線）；
?
border-color：顏色；
?
邊框的復(fù)合性寫法：border：1px solid red；//沒有順序
?
邊框可以分開來寫。
舉個例子
寫一個盒子200*200，上邊框為 紅色，其余邊框為藍色。
方案一
div{
width：200px;
height：200px;
border-top:1px solid red;
border-left:1px solid blue;
border-bottom:1px solid blue;
border-right:1px solid blue;
}
?
<div></div>
方案二：
div{
width：200px;
height：200px;
border:1px solid blue;
border-top：1px solid red;
}
?
<div></div>
注意：
1.很顯然，第二種方式更加簡單，因為利用了css樣式的層疊性，red只是層疊了上邊框。
2.border-top不能夠放在border上面的，因為就近原則。
3.邊框會影響盒子的實際大小。
border-collapse:collapse;會把相鄰的邊框合在一起。
content：內(nèi)容
padding：內(nèi)邊距（設(shè)置邊框與盒子內(nèi)容之間的距離）。
1個值，代表上下左右相同。
2個值，代表上下是一個值，左右是一個值。
3個值，代表上一個值，左右一個值，下一個值。
4個值，代表上下左右分別代表不同的值。
順序：上--右--下--左 順時針轉(zhuǎn)圈。
案例：做導(dǎo)航欄的時候使用padding撐開盒子。
margin：外邊距（控制盒子和盒子之間的距離）
嵌套塊元素垂直外邊距的塌陷
很明顯，我沒有設(shè)置父類盒子的外邊距，我只是設(shè)置了子類盒子的外邊距，為什么會掉下來了？
這個問題我遇到過很多次，原因就是在有嵌套關(guān)系的時候，父元素有上外邊距，此時父元素會塌陷較大的外邊距值。
解決方案：
為父元素定義一個上邊框。
可以為父元素定義內(nèi)邊距。
可以為父元素添加overflow：hidden；
清除內(nèi)外邊距
*{
margin：0；
padding：0；
}
