選擇器+盒模型

3、組合選擇器

一、羣組選擇器

• 一次性控制多個選擇器
• 選擇器之間以,隔開，每個選擇器位都可覺得任意合法選擇器或選擇器組合

二、子代(後代)選擇器

子代選擇器用>鏈接,後代選擇器用空格鏈接

• 一次性控制一個選擇器(邏輯最後的那個選擇器)，前置位的選擇器爲修飾性選擇器
• 每個選擇器位都可覺得任意合法選擇器或選擇器組合
• 子代選擇器必須爲一級父子嵌套關係，後代選擇器能夠爲一級及多級父子嵌套關係

三、相鄰(兄弟)選擇器

相鄰選擇器用+鏈接,兄弟選擇器用~鏈接

• 一次性控制一個選擇器(邏輯最後的那個選擇器)，前置位的選擇器爲修飾性選擇器
• 每個選擇器位都可覺得任意合法選擇器或選擇器組合
• 相鄰選擇器必須爲直接相鄰關係，兄弟選擇器能夠爲直接相鄰或間接相鄰關係

四、交集選擇器

```css

 

div.d#dd { color: red; }

 

.d1.d2.d3 { color: red; } ```

4、組合選擇器優先級

同目錄結構下

• 子代與後代優先級相同,body > div == body div
• 相鄰與兄弟優先級相同,div + span == div ~ span
• 最終樣式採用邏輯後的樣式值

不一樣目錄結構下

• 1.根據選擇器權值進行比較
• 2.權值爲標籤權重之和
• 3.權重: *:1 div:10 class:100 id:1000 !important:10000
• 4.權值比較時,關心的是值大小,不關心值的位置與具體選擇器名
• 5.id永遠比class大,class永遠比標籤大
• 注:控制的是同一目標,才具備可比性;

盒模型

1、盒模型概念

• 廣義盒模型：文檔中全部功能性及內容性標籤，及文檔中全部顯示性標籤
• 俠義盒模型：文檔中以塊級形式存在的標籤（塊級標籤擁有盒模型100%特性且最經常使用）
• 盒模型組成：margin + border + padding + content

v_hint：content = width x height

2、盒模型成員介紹

一、content

• 經過設置width與height來規定content
• 塊級標籤能夠設置自身寬高，默認寬爲父級寬(width=auto)、高爲0，高度能夠由內容決定
• 內聯標籤不能夠設置自身寬高，默認寬高均爲0，寬高必定由內容決定

二、border

• border(邊框)由border-width(寬度)、border-color(顏色)、border-style(風格)三部分組成

v_hint：border知足總體設置語法，eg：border: 1px solid red;

三、padding

• padding成員：padding-left、padding-right、padding-top、padding-bottom
• padding總體設置

四、margin

• margin成員：margin-left、margin-right、margin-top、margin-bottom
• margin總體設置

規定起始,順時針,不足找對面

3、邊界圓角

border-radius

• border-radius成員

| 成員 | 解釋 | | border-top-left-radius | 左上 方位 | | border-top-right-radius | 右上 方位 | | border-bottom-left-radius | 左下 方位 | | border-bottom-right-radius | 右下 方位 |

• 單方位設置

值類型：長度 \ 百分比

• 分向總體設置

不分方位:左上爲第一個角,順時針,不足找對角

區分方位:/前控制橫向 /後控制縱向,橫向又分1,2,3,4,縱向毅然

4、標籤

1.超連接標籤

./ 或省略表明當前文件所在的路徑,能夠訪問與該文件同路徑下的全部文件及文件夾

2.屬性

title:鼠標懸浮的文本提示 target:blank,新開空白標籤位來打開目標頁面

3.其餘應用場景

mailto | sms | tel

4.錨點

a與a href = "#錨點名" name = "錨點名"

img5.使用

src="地址" alt="資源加載失敗文本提示" title="圖片文本信息,鼠標懸浮展現"

6.list列表

僞類選擇器

一、a標籤四大僞類

• :link：未訪問狀態
• :hover：懸浮狀態
• :active：活躍狀態
• :visited：已訪問狀態

二、內容僞類

• :before：內容以前
• :after：內容以後

css :before, :after { content: "ctn"; }

三、索引僞類

• :nth-child(n)：位置優先，再匹配類型
• :nth-of-type(n)：類型優先，再匹配位置

v_hint：值能夠爲位置數，也能夠爲2n、3n...，表明2的倍數，3的倍數，且位置數從1開始

四、取反僞類

• :not(selector)：對selector進行取反

盒模型佈局

一、盒模型佈局基本介紹

• 佈局方位：margin-left、margin-right、margin-top、margin-bottom
• 影響自身佈局：margin-left、margin-top
• 影響兄弟佈局：margin-right、margin-bottom
• 正向 / 反向：正值 / 負值

二、margin佈局坑位

• 不少語義標籤具備默認margin
• 父子標籤margin-top重疊取大者
• 兄弟標籤margin-bottom、margin-top重疊取大者