DAY46-前端入門-組合選擇器、標籤a_img_list、盒模型、僞類、盒模型佈局

目錄

• 1、組合選擇器
  • 羣組選擇器
  • 子代選擇器
  • 後代選擇器
  • 相鄰選擇器
  • 兄弟選擇器
  • 交集選擇器
  • 組合選擇器的優先級
• 2、屬性選擇器
• 3、盒模型
  • 盒模型概念
  • 盒模型成員介紹
• 4、邊界圓角
  • 單角設置
  • 總體賦值
• 5、經常使用標籤
  • 超鏈接標籤a
  • 圖片標籤img
  • 列表標籤list
• 6、僞類選擇器
  • a標籤的四大僞類
  • 內容僞類
  • 索引僞類
  • 取反僞類
• 7、盒模型佈局
  • 作頁面必備reset操做
  • 盒模型佈局基本介紹
  • display:顯示方式
  • 兄弟坑
  • 父子坑
  • 解決方案

1、組合選擇器

羣組選擇器

能夠將任意多個選擇器分組到一塊兒，並用逗號分隔。

div,.s,section{
            color:red;
        }

子代選擇器

若是隻但願影響到某個標籤下的第一級標籤，能夠用子代選擇器。

x > y。只會影響到x標籤下的y標籤，不會影響到x標籤下的z標籤裏的y標籤。

div>strong{
    color:red;
}

後代選擇器

又稱包含選擇器。只要是在這個標籤裏的某種標籤都會被影響

x 空格 y。x標籤下全部的y標籤

div a {
    text-decoration: none;
}

相鄰選擇器

若是須要選擇緊接在另外一個元素後的元素，並且兩者有相同的父元素，可使用相鄰兄弟選擇器。

x + y。x標籤左右的y標籤

span+section{
            background-color:pink;
        }

兄弟選擇器

x ~ y。x標籤附近的全部的y標籤。兄弟選擇器包括相鄰選擇器。

span~section{
            background-color:brown;
        }

交集選擇器

相交的部分就是要設置屬性值的標籤

xy。即有x又有y

i.s{
    color: yellow;
}
<i class='s'>iiii</i>

組合選擇器的優先級

同目錄結構下

​ 子代與後代優先級相投。相鄰與兄弟優先級相同。

​ 最終的樣式採用邏輯後的樣式根據選擇器權值進行比較

不一樣目錄結構下

​ 根據選擇器權值進行比較

​ 權值爲標籤權重之和

​ 權重： *:1
​ div:10
​ class:100
​ id:1000
​ !important:10000

​ 權值比較時，關心的是值的大小，不關心位置和具體選擇器名

​ 權值相同時，靠位置決定

​ id永遠比class大，class永遠比標籤大

​ 控制的是同一目標才具備可比性

2、屬性選擇器

​ 屬性選擇器權重與class選擇器同樣

​ 有屬性class的全部標籤

[class]{
            color: orange;
        }

​ 有屬性class且值爲d2的全部標籤

[class='d2']{
            color: pink;
        }

​ div且class='d2',權重增長

div[class='d2']{
            color: blue;
        }

​ 屬性以什麼開頭：^=

[class^='he']{
            color: yellow;
        }

​ 屬性以什麼結尾：$=

[class^='rd']{
            color: tan;
        }

​ 屬性模糊匹配：*=

[class^='llo']{
            color: cyan;
        }

3、盒模型

盒模型概念

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

盒模型成員介紹

content

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

border

• border(邊框)由border-width(寬度)、border-color(顏色)、border-style(風格)三部分組成
• 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
• border-style成員：border-left-style、border-right-style、border-top-style、border-bottom-style

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

padding

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

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

margin

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

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

4、邊界圓角

單角設置

border-top-left-radius

一個固定值:表示橫縱
border-top-left-radius: 100px;
兩個固定值:表示橫與縱
border-top-left-radius: 100px,50px;
百分比賦值
border-top-left-radius: 100%;

總體賦值

border-radius

不分方位
左上爲第一個角,順時針,不足找對角
border-radius: 30px;

區分橫縱
1.控制橫向/控制縱向
2.橫向又能夠分爲1,2,3,4個值;縱向亦然
border-radius: 10px 100px 50px /50px;
左上橫10 右上橫100 右下橫50 左下橫100/縱向全爲50

5、經常使用標籤

超鏈接標籤a

語法

<a href="連接地址"  title='鼠標懸浮的文本提示' target='目標位置'></a>

target:_self 當前頁面打開 | _blank 新開空白標籤爲來打開目標網頁

基本使用

<a href="https://www.baidu.com">百度</a>

注：若是是在本地的連接。當前目錄./ 上一級目錄..

其餘應用場景

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

a標籤默認屬性的清除

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

錨點

經過錨點名與#錨點名建起關聯

name='tag'|href='#tag'

前往底部

<a href="#tag">前往底部</a>

設置一個錨點

<div class="bottom">
        <a name="tag">底部</a>
</div>

圖片標籤img

語法

<img src="圖片地址" alt="加載錯誤提示文字" title="鼠標懸浮的文本提示">

列表標籤list

reset操做

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

有序列表

<ol>
    <li>列表項</li>
    <li>列表項</li>
    <li>列表項</li>
</ol>

無序列表

<ul>
    <li>列表項</li>
    <li>列表項</li>
    <li>列表項</li>
</ul>

6、僞類選擇器

a標籤的四大僞類

• :link 初始狀態
• :hover 鼠標懸停
• :active 活動狀態
• :visited 訪問事後的狀態

注:鼠標樣式

{
    cursor: pointer | wait | move;
}

內容僞類

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

.txt:before{
    content: '我是前綴```'
}
.txt:after{
    content: '```我是後綴'
}

索引僞類

• :nth-child(n)：位置優先，再匹配類型。找到全部結構下的第N個標籤,若是恰好是所選類型,那麼匹配成功。
• :nth-of-type(n)：類型優先，再匹配位置。先將頁面中的全部的所選類型找出,在匹配那些在本身結構層次下的第N個。

注：位置從1開始

取反僞類

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

7、盒模型佈局

作頁面必備reset操做

*{
    margin: 0
}

盒模型佈局基本介紹

• 佈局方位：margin-left、margin-right、margin-top、margin-bottom

• 影響自身佈局：margin-left、margin-top

• 影響兄弟佈局：margin-right、margin-bottom

  ​ margin-bottom影響上下兄弟,儘可能別對margin-right進行設置

  ​ margin-right影響上下兄弟,儘可能別對margin-bottom進行設置

display:顯示方式

• 塊:block
• 內聯:inline
• 內聯塊:inline-block

兄弟坑

<!-- 坑1 -->
    <section class="s1"></section>
    <section class="s2"></section>

盒模型佈局的坑只出如今和margin-top相關的地方

.s1,.s2{
            width: 100px;
            height: 100px;
            background-color: pink;
        }

和左右不同,上下top會重疊取大值

.s1{
            margin-bottom: 20px;
        }
        .s2{
            margin-top: 20px;
        }

父子坑

<!-- 坑2 -->
    <div class="sup">
        <div class="sub"></div>
    </div>

.sup{
            width: 200px;
            height: 200px;
            background-color:cyan;
        }
        .sub{
            width: 100px;
            height: 100px;
            background-color:orange;
        }

父子top重疊,取大值

.sup{
        margin-top: 50px;
    }
    .sub{
        margin-left: 50px;
        /*margin-top:100px;*/
    }

解決方案

1.將父級固定

.sup{
    /border-top: 1px solid black;/
    /border-top: 1px solid transparent;/
    /保證顯示區域不變200200/
    /height: 199px/
}

2.經過padding

.sup{
    padding-top:50px; 
    height: 150px;
}