盒模型 標籤a、img、list 僞類選擇器 盒模型佈局

盒模型

一.盒模型概念

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

二.盒模型成員介紹

1.content

• 經過設置width和height來規定content

2.border

• border組成:寬度,顏色,樣式

• border成員：border-left、border-right、border-top、border-bottom

• border-width成員：border-left-width、border-right-width、border-top-width、border-bottom-width

• border-color成員：border-left-color、border-right-color、border-top-color、border-bottom-color

  • transparent(透明)(經常使用)

• border-style成員：border-left-style、border-right-style、border-top-style、border-bottom-style

  ​ style屬性值:

風格	解釋
solid	實線
dashed	虛線
dotted	點狀線
double	雙實線
groove	槽狀線
ridge	脊線
inset	內嵌效果線
outset	外凸效果線

3.padding

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

值得個數	方位
1	上下左右
2	上下 | 左右
3	上 | 左右 | 下
4	上 | 右 | 下 | 左

4.margin

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

賦值個數	方位
1	上下左右
2	上下 | 左右
3	上 | 左右 | 下
4	上 | 右 | 下 | 左

三.邊界圓角

border-radius

• border-radius成員

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

• 單方位設置

賦值個數(值類型：長度 | 百分比)	解釋
1	橫縱
2	橫 | 縱

• 按角總體設置

賦值個數(值類型：長度 | 百分比)	解釋
1	左上 右上 左下 右下
2	左上 右下 | 右上 左下
3	左上 | 右上 左下 | 右下
4	左上 | 右上 | 右下 | 左下

• 分向總體設置

格式	解釋
1 / 1	橫向 | 縱向

四.顯示方式

• display

值	描述
inline	內聯
block	塊級
inline-block	內聯塊

標籤a、img、list

1、a標籤

一、經常使用用法

<a href="https://www.baidu.com">前往百度</a>
<a href="./index.html">前往主頁</a>

二、相對路徑

以當前文件做爲參考，.表明當前路徑，..表明上一級目錄

三、經常使用屬性

title -- 連接說明
target -- _self | _blank -- 目標位置

四、其餘用法

• mailto：郵件給...
• tel：電話給...
• sms：信息給...

五、a標籤reset操做

a {
    color: #333;
    text-decoration: none;
    outline: 0;
}

六、錨點

① <a href="#tag">前往錨點</a> <a name="tag" des="錨點"></a>
② <a href="#tag">前往錨點</a> <i id="tag" des="錨點"></i>

七、鼠標樣式

{
    cursor: pointer | wait | move;
}

2、img標籤

一、經常使用用法

<img src="https://image/icon.gif" />
<img src="./icon.gif" />

二、經常使用屬性

alt -- 異常解釋
title -- 圖片解釋

3、list列表

一、有序列表

<ol>
    <li></li>
    <li></li>
</ol>

二、無序列表

<ul>
    <li></li>
    <li></li>
</ul>

三、list的reset操做

ol, ul {
    margin: 0;
    padding: 0;
    list-style:none;
}

僞類選擇器

一、a標籤四大僞類

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

二、內容僞類

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

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

三、索引僞類

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

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

四、取反僞類

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

盒模型佈局

一、盒模型佈局基本介紹

作頁面以前的reset操做:

html,body{
    margin:0;
}

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

注意點:margin-top與margin-bottom(重疊取大值 兄弟關係 父子關係)​

二、margin佈局坑位

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