亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 15
粉絲 0
評(píng)論 2
訪問量 18689
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
CSS選擇器的使用,盒子模型的內(nèi)外邊距
王紅偉的博客
原創(chuàng)
1175人瀏覽過

1.實(shí)例演示相鄰選擇器與兄弟選擇器,并分析異同

#id + * {} 是相鄰選擇器, 指當(dāng)前元素后面緊挨著的相鄰元素會(huì)被選中.

#id ~ * {}  是兄弟選擇器,指當(dāng)前元素后面所有的元素會(huì)被選中.

實(shí)現(xiàn)效果如下:

p_6.png


實(shí)現(xiàn)代碼如下:

實(shí)例

<style>
        div {
            width: 40px;
            height: 40px;
            background-color: red;
            border: 1px dashed black;
            display: inline-block;
            text-align: center;
            line-height: 40px;
            margin: 20px 4px;
            /* 設(shè)置DIV的外邊距 */
        }
        
        ul {
            margin: 0;
            padding-left: 0;
            /* 取消左側(cè)圓點(diǎn) */
            border: 0px dashed red;
            /* 邊框?yàn)樘摼€,紅色,1個(gè)像素 */
        }
        
        ul li {
            list-style-type: none;
            width: 50px;
            height: 50px;
            background-color: wheat;
            text-align: center;
            line-height: 50px;
            /* 水平和垂直的居中 */
            border-radius: 50%;
            display: inline-block;
            /* 將一個(gè)塊級(jí)元素轉(zhuǎn)為內(nèi)聯(lián)元素 */
            box-shadow: 2px 2px 1px #888;
        }
        /* 相鄰選擇器 */
        
        #bg-blue+* {
            background-color: yellow;
        }
        /* 兄弟選擇器 */
        
        #green~* {
            background-color: green;
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li id=bg-blue>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <div>1</div>
    <div id="green">2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>

</body>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例



2.實(shí)例演示:nth-child() 和 :nth-of-type()選擇器,并分析異同

偽類: 子元素選擇器:nth-child(n) 選擇器匹配屬于其父元素的第 N 個(gè)子元素，不論元素的類型。n 可以是數(shù)字、關(guān)鍵詞或公式。


實(shí)現(xiàn)效果如下:

p_7.png

偽類: 類型選擇器,:nth-of-type(n) 選擇器匹配屬于父元素的特定類型的第 N 個(gè)子元素的每個(gè)元素.n 可以是數(shù)字、關(guān)鍵詞或公式。

實(shí)現(xiàn)效果如下:

p_8.png

實(shí)現(xiàn)代碼如下:

實(shí)例

<style>
            ul {
            margin: 0;
            padding-left: 0;
            /* 取消左側(cè)圓點(diǎn) */
            border: 0px dashed red;
            /* 邊框?yàn)樘摼€,紅色,1個(gè)像素 */
        }
        
        ul li {
            list-style-type: none;
            width: 50px;
            height: 50px;
            background-color: wheat;
            text-align: center;
            line-height: 50px;
            /* 水平和垂直的居中 */
            border-radius: 50%;
            display: inline-block;
            /* 將一個(gè)塊級(jí)元素轉(zhuǎn)為內(nèi)聯(lián)元素 */
            box-shadow: 2px 2px 1px #888;
        }
        /* 偽類:子元素選擇器  */
        
        ul :first-child {
            background-color: coral;
        }
        /* 選擇第一個(gè)元素 */
        
        ul :last-child {
            background-color: coral;
        }
        /* 選擇最后一個(gè)元素 */
        
        ul :nth-child(2) {
            background-color: green;
        }
        /* 選擇第二個(gè)元素 */
        
        ul :nth-last-child(2) {
            background-color: blue;
        }
        /* 選擇倒數(shù)第二個(gè)元素 */
        
        ul li:first-of-type {
            background-color: darkorange;
            color: white;
        }
        
        ul li:last-of-type {
            background-color: darkorange;
            color: white;
        }
        
        ul li:nth-of-type(2) {
            background-color: darkgreen;
            color: white;
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li id=bg-blue>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例


3. 實(shí)例演示:padding 對(duì)盒子大小的影響與解決方案, 使用寬度分離或box-sizing將圖片顯示在容器中間,演示內(nèi)邊距對(duì)盒子大小的影響與解決方案(使用寬度分離或box-sizing)

實(shí)現(xiàn)效果如下:

p_9.png


實(shí)現(xiàn)代碼如下:


實(shí)例

<style>
        .box1 {
            width: 240px;
            border: 1px solid black;
            background-color: rgb(235, 53, 108);
        }
        
        .box1 {
            padding: 20px;
            width: 200px;
        }
        /* 使用寬度分離 */
        
        .wrap {
            width: 242px;
        }
        
        .box2 {
            padding: 20px;
            background-color: lightsalmon;
            border: 1px solid black;
        }
        /* box-sizing */
        
        .box3 {
            width: 242px;
            box-sizing: border-box;
            padding: 20px;
            background-color: pink;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <!-- 將圖片顯示在容器中間,演示內(nèi)邊距對(duì)盒子大小的影響與解決方案(使用寬度分離或box-sizing) -->
    <div class="box1">
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567562883900&di=df325af2d0000f36c7d42a6cf9792408&imgtype=0&src=http%3A%2F

%2Fi.shangc.net%2F2017%2F0627%2F20170627125731351.jpg" alt="如花" width="200">
    </div>
    <div class="wrap">
        <div class="box2">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567562883900&di=df325af2d0000f36c7d42a6cf9792408&imgtype=0&src=http%3A

%2F%2Fi.shangc.net%2F2017%2F0627%2F20170627125731351.jpg" alt="如花" width="200">
        </div>
    </div>
    <div class="box3">
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567562883900&di=df325af2d0000f36c7d42a6cf9792408&imgtype=0&src=http%3A%2F

%2Fi.shangc.net%2F2017%2F0627%2F20170627125731351.jpg" alt="如花" width="200">
    </div>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例






4. 實(shí)例演示: margin中的同級(jí)塌陷, 嵌套傳遞與自動(dòng)擠壓, 并提出解決方案或應(yīng)用場(chǎng)景

(1)盒子外邊框同級(jí)塌陷效果 :同級(jí)塌陷,誰大向誰擠壓


p_10.png

(2) 父級(jí)盒子會(huì)隨內(nèi)部盒子一起移動(dòng),為了解決,讓內(nèi)部盒子內(nèi)邊距增加,寬度再減去內(nèi)邊距,或使用box-sizing: border-box屬性 

padding和border被包含在定義的width和height之內(nèi)。對(duì)象的實(shí)際寬度就等于設(shè)置的width值，即使定義有border和padding也不會(huì)改變對(duì)象的實(shí)際寬度，即 ( Element width = width )

實(shí)現(xiàn)效果如下:

p_11.png


(3)自動(dòng)擠壓的效果:

p_12.png


實(shí)例

<style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: limegreen;
            margin-bottom: 50px;
        }
        
        .box2 {
            width: 100px;
            height: 100px;
            background-color: red;
            margin-top: 30px;
        }
        
        .box3 {
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            background-color: rgb(245, 125, 125);
        }
        
        .box4 {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
        /* .box4 {
            margin-top: 50px;
        } */
        /* 父級(jí)盒子會(huì)隨內(nèi)部盒子一起移動(dòng),為了解決,讓內(nèi)部盒子內(nèi)邊距增加,寬度再減去內(nèi)邊距 */
        
        .box3 {
            padding-top: 50px;
            /* height: 150px; */
        }
        
        .box5 {
            /* 自動(dòng)擠壓 */
            width: 150px;
            height: 150px;
            background-color: cornflowerblue;
        }
        
        .box5 {
            margin: 30px auto;
        }
    </style>
</head>

<body>
    <!-- 1.同級(jí)塌陷,誰大向誰擠壓 -->
    <div class="box1"></div>
    <div class="box2"></div>
    <!-- 嵌套傳遞 -->
    <hr>
    <div class="box3">
        <div class="box4"></div>
    </div>
    <!-- 自動(dòng)擠壓 -->
    <div class="box5"></div>


</body>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例



今日總結(jié): 給老師提個(gè)優(yōu)化建議,這個(gè)文章編輯器真的很爛,插入代碼后,繼續(xù)輸入的內(nèi)容就變成代碼模式, 一邊保存,一遍預(yù)覽,重新排版花了30分鐘.也許是我不會(huì)用吧.

批改狀態(tài)：合格

老師批語：看來你是認(rèn)真聽課了
本博文版權(quán)歸博主所有，轉(zhuǎn)載請(qǐng)注明地址！如有侵權(quán)、違法，請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理！
全部評(píng)論 文明上網(wǎng)理性發(fā)言，請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議
0條評(píng)論
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長(zhǎng)！
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)