前端入門

1、組合選擇器

　　1.羣組選擇器

　　2.子代選擇器

　　3.後代選擇器

　　4.相鄰選擇器

　　5.兄弟選擇器

　　6.交集選擇器

　　7.組合選擇器的優先級

2、屬性選擇器

3、盒模型

　　1.盒模型概念

　　2.盒模型成員介紹

4、邊界圓角

　　1.單角設置

　　2.總體賦值

5、經常使用標籤

　　1.超連接標籤a

　　2.圖片標籤img

　　3.列表標籤list

6、僞類選擇器

　　1.a標籤的四大僞類

　　2.內容僞類

　　3.索引僞類

　　4.取反僞類

7、盒模型佈局

　　1.作頁面必備reset操做

　　2.盒模型佈局基本介紹

　　3.display：顯示方式

　　4.兄弟坑

　　5.父子坑

　　6.解決方案

1、組合選擇器

1.羣組選擇器

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

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

2.子代選擇器

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

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

div>strong{
    color:red;
}

3.後代選擇器

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

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

div a {
    text-decoration: none;
}

4.相鄰選擇器

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

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

span+section{
            background-color:pink;
        }

5.兄弟選擇器

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

span~section{
            background-color:brown;
        }

6.交集選擇器

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

　　xy。即有x又有y

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

7.組合選擇器的優先級

同目錄結構下

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

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

不一樣目錄結構下

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

​ 　　權值爲標籤權重之和

權重： *: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^='233']{
            color: cyan;
        }

3、盒模型

1.盒模型概念

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

2.盒模型成員介紹

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、邊界圓角

1.單角設置

　　border-top-left-radius

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

2.總體賦值

　　border-radius

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

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

5、經常使用標籤

1.超連接標籤a

語法

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

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

基本使用

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

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

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>

2.圖片標籤img

語法

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

3.列表標籤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、僞類選擇器

1.a標籤的四大僞類

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

注：鼠標樣式

{
    cursor: pointer | wait | move;
}

2.內容僞類

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

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

3.索引僞類

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

注：位置從1開始

4.取反僞類

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

7、盒模型佈局

1.作頁面必備reset操做

*{
    margin: 0
}

2.盒模型佈局基本介紹

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

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

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

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

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

3.display：顯示方式

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

4.兄弟坑

    <!-- 坑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;
        }

5.父子坑

    <!-- 坑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;*/
    }

6.解決方案

1.將父級固定

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

2.經過padding

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