我和CSS的第二天——複合選擇器、背景、塊元素/行內元素

一．選擇器

1. 複合選擇器：寫法.nav a{ }

2. 子元素選擇器：寫法.nav>a{ }。只能選擇最近一級的元素。

3. 並集選擇器：寫法.nav,a{ }。用於集體聲明。

4. 僞類選擇器：寫法例如a:link{選擇所有未被訪問的鏈接}，a:visited{選擇所有已被訪問的鏈接}，a:hover{選擇鼠標位於其上的鏈接}，a:active{選擇活動鏈接}，必須按照link>visited>hover>active的順序書寫。順序簡單記憶爲LVHA。

6. 交集選擇器：寫法p.one{ 用於聲明既是p標籤又是one類名的元素 }。

7. 後代、鏈接僞類、並集是必須要掌握的！
   

格式化對齊快捷鍵：
Windows： Ctrl + K + F
Windows：Shift + Alt + F
Mac： Shift + Option + F
Ubuntu： Ctrl + Shift + I
二．元素顯示模式
塊元素 —— block
特點：獨佔一行
可以設置寬度、高度、外邊距、邊框和內邊距
寬度默認是父級容器的寬度
可以存放其他行內元素和塊級元素
注意：開發時不要在文本類元素(例如p、h1~h6)中添加其他元素

2. 行內元素 —— inline
   特點：相鄰行內元素在一行顯示，一行多個
   給行內元素設置寬高是無效的
   默認寬度是內容的寬度（被內容撐開）
   只能容納文本或其他行內元素
   注意：鏈接不能再放鏈接
   特殊情況的鏈接可以存放塊級元素
   3.行內塊元素 —— inline-block
   特點：相鄰行內元素在一行顯示，一行多個（行內元素特點）
   默認寬度就是本身內容的寬度（行內元素特點）
   可以設置寬度、高度、外邊距、邊框和內邊距（塊級元素 特點）
   

4.顯示模式的轉換
應用場景：讓行內元素具有寬高：把行內元素轉換成塊元素或者行內塊元素
讓塊元素一行顯示：把塊元素轉換成行內塊元素
代碼：display: block 轉換爲塊元素
display: inline-block 轉換爲行內塊元素
display: inline 轉化爲行內元素（使用較少）
tip：
行高=高可以實現單行文字垂直居中
代碼：line-height：高;

三．背景
1.background-color：背景顏色
屬性transparent 透明的
2.background-image：背景圖片
3.background-repeat：背景平鋪

4. background-position：背景方位名詞
   

5.背景固定
background-attachment