css第四天

今天學完之後，感覺亂亂的，但是堅持就是勝利，沖沖衝！！！
一.emmet 語法生成 html 標籤
1 N, 連續生成 N 個 ,div5
2 父>子, 生成父子關係結構, ul>li5
3 兄+弟 ,生成兄弟關係結構 , h1+div2+h4+p*2
4 .class / #id , 生成帶 class 或 id 的 div , .red / #app

tac → text-align: center;
ti2em → text-indent: 2em;
lh26px → line-height: 26px;
tdn → text-decoration: none;
設定寬高：
w100 → width: 100px;
h200 → height: 200px;
二.複合選擇器（重點）
1.複合選擇器分為：後代、子代、並集、偽類
後代選擇器：可以選擇父元素中的子元素；
語法格式：選擇器1 選擇器2 {樣式宣告;}
後代選擇器的選擇器之間使用空格分開，後代選擇器中的元素可以是任一一種基礎選擇器。
2.子元素選擇器：選擇某個元素最近一級的子元素（親兒子）
語法格式：選擇器1 > 選擇器2 {樣式宣告;}
子代選擇器的選擇器之間使用 > 分開。
3.並集選擇器：集體宣告 —— 選擇多組標籤，同時設定相同的樣式
語法格式：選擇器1,選擇器2 {樣式宣告;}
並集選擇器的選擇器之間使用 , 分開，最後一個選擇器不需要逗號
並集選擇器通常會豎式排列選擇器，提高程式碼的可讀性
4.連結偽類選擇器(上)
a:link 選擇所有未被訪問的連結；
a:visited 選擇所有已經被訪問的連結；
a:hover 選擇滑鼠指標位於其上的連結；
a:active 選擇啟用連結（滑鼠按下未抬起的連結）；
5.連結偽類選擇器(下)
連結偽類選擇器的書寫順序 l v h a；
因為 a 標籤是有點選跳轉行為的，預設與其他文字的顯示樣式就不相同，在實際開發中，需要給 a 標籤單獨設定樣式；

• focus 偽類選擇器
  例項：input:focus
  7.交集選擇器…
  三. 元素的顯示模式 —— 佈局認知（重要！！！）
  1.塊元素 —— block
  特點：

• 獨佔一行

• 可以設定寬度、高度、外邊距、邊框和內邊距

• 寬度預設是父級容器的寬度

• 可以存放其他行內元素和塊級元素
  注意：開發時不要在文字類元素中新增其他元素，專注於文字存放（ h1~h6 、 p ）
  常見的塊元素div 、 ul 、 ol 、 li 、 h1~h6 、 p…
  2.行內元素 —— inline
  特點：

• 相鄰行內元素在一行顯示，一行多個

• 給行內元素設定寬高是無效的

• 預設寬度是內容的寬度（被內容撐開）

• 只能容納文字或其他行內元素
  注意：連結不能再放連結，特殊情況的連結可以存放塊級元素
  3.行內塊元素 —— inline-block

• 相鄰行內元素在一行顯示，一行多個（行內元素特點）

• 預設寬度就是本身內容的寬度（行內元素特點）

• 可以設定寬度、高度、外邊距、邊框和內邊距（塊級元素特點）
  目前所學的行內塊元素：img 、 input 、 td
  4.顯示模式的轉換（重要）
  轉換場景：

• 讓行內元素具有寬高：把行內元素轉換成塊元素或者行內塊元素

• 讓塊元素一行顯示：把塊元素轉換成行內塊元素
  轉換程式碼：

• display: block 轉換為塊元素

• display: inline-block 轉換為行內塊元素

• display: inline 轉化為行內元素（使用較少）
  補充：在寫 CSS 時，記住把 display 轉換顯示模式的設定寫在第一行。

• 單行文字垂直居中
  將 line-height 設定為盒子的高度。
  四. 背景圖片
  一般情況下元素背景顏色是 transparent 透明的
  1、 背景平鋪

• repeat 預設，水平垂直平鋪

• no-repeat 不平鋪

• repeat-x 水平平鋪

• repeat-y 垂直平鋪
  2、背景位置-方位名詞
  background-position (背景位置)
  水平方向： left / right / center
  垂直方向： top / bottom / center
  水平居中：background-position: center;
  3、背景位置-精確單位
  順序：第一個值一定是 x / 第二個值一定是 y
  如果只指定了一個值，則是x 方向的，另一個方向垂直方向居中顯示
  4、背景位置-混合單位
  順序同3
  5、背景固定
  background-attachment
  可以製作視差滾動效果

• scroll 預設，背景影像跟隨滾動

• fixed 背景影像固定
  6、 背景屬性複合寫法

font: font-style font-weight font-size/line-height font-family

沒有順序，但是推薦順序是：

 background: color image repeat attachment position

衝就完事了！