选择器nth-child()和nth-of-type()选择器，padding 对盒子大小的影响与解决方案，同级塌陷，嵌套传递，自动挤压 2019.09.03 - 作业

Home > List of blog posts > 选择器nth-child()和nth-of-type()选择器，padding 对盒子大小的影响与解决方案，同级塌陷，嵌套传递，自动挤压 2019.09.03

Blogger Information

Blog 12

fans 0

comment 0

visits 7321

Special Recommendation

More>

Related recommendations

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选择器</title>
    <link rel="stylesheet" href="1.css">
</head>

<body>
    <ul>
        <li class="bg-green">1</li>
        <li id="bg-blue">2</li>
        <li class="bg-green">3</li>
        <li class="bg-green">4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
    <div>
        <p>宫本武藏</p>
        <li>貂蝉</li>
        <p>沈梦溪</p>
    </div>
    <div>
        <p>妲己</p>
        <li>东皇太一</li>

    </div>

</body>

</html>
ul {
    margin: 0;
    padding-left: 0;
    border: 1px dashed red;
}

ul li {
    list-style: none;
    width: 40px;
    height: 40px;
    background-color: wheat;
    text-align: center;
    border: 0px solid black;
    line-height: 40px;
    border-radius: 50%;
    display: inline-block;
}

#bg-blue {
    background-color: lightblue;
}

.bg-green {
    background-color: lightgreen;
}

#bg-blue,
.bg-green {
    border: 1px solid blue;
}


/* #bg-blue+* {
    background-color: yellow;
}

#bg-blue~* {
    background-color: yellow; */


/* } */

ul :first-child {
    background-color: coral;
}

ul :last-child {
    background-color: coral;
}

ul :nth-child(6) {
    background-color: coral;
}

ul :nth-last-child(3) {
    background-color: coral;
}

ul li:first-of-type {
    background-color: darkgreen;
    color: white;
}

ul li:last-of-type {
    background-color: darkgreen;
    color: white;
}

div :nth-child(2) {
    background-color: lightgreen;
}

div:first-of-type :nth-child(3) {
    /* background-color: yellow; */
}

p:nth-of-type(2) {
    background-color: yellow;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

2. 实例演示:nth-child() 和 :nth-of-type()选择器,并分析异同

nth-child:关注点不同，关注的是位置

nth-child：既关注位置，又关注类型

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选择器</title>
    <link rel="stylesheet" href="1.css">
</head>

<body>
    <ul>
        <li class="bg-green">1</li>
        <li id="bg-blue">2</li>
        <li class="bg-green">3</li>
        <li class="bg-green">4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
    <div>
        <p>宫本武藏</p>
        <li>貂蝉</li>
        <p>沈梦溪</p>
    </div>
    <div>
        <p>妲己</p>
        <li>东皇太一</li>

    </div>

</body>

</html>
ul {
    margin: 0;
    padding-left: 0;
    border: 1px dashed red;
}

ul li {
    list-style: none;
    width: 40px;
    height: 40px;
    background-color: wheat;
    text-align: center;
    border: 0px solid black;
    line-height: 40px;
    border-radius: 50%;
    display: inline-block;
}

#bg-blue {
    background-color: lightblue;
}

.bg-green {
    background-color: lightgreen;
}

#bg-blue,
.bg-green {
    border: 1px solid blue;
}


/* #bg-blue+* {
    background-color: yellow;
}

#bg-blue~* {
    background-color: yellow; */


/* } */

ul :first-child {
    background-color: coral;
}

ul :last-child {
    background-color: coral;
}

ul :nth-child(6) {
    background-color: coral;
}

ul :nth-last-child(3) {
    background-color: coral;
}

ul li:first-of-type {
    background-color: darkgreen;
    color: white;
}

ul li:last-of-type {
    background-color: darkgreen;
    color: white;
}

div :nth-child(2) {
    background-color: lightgreen;
}

div:first-of-type :nth-child(3) {
    /* background-color: yellow; */
}

p:nth-of-type(2) {
    background-color: yellow;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

3. 实例演示:padding 对盒子大小的影响与解决方案, 使用宽度分离或box-sizing

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="3.css">
    <title>内边距</title>
</head>

<body>
    <div class="box">
        <img src="3.jpg" alt="张艺兴" width="200">

    </div>


    <div class="wrap">
        <div class="box2">
            <img src="3.jpg" alt="张艺兴" width="200">
        </div>
    </div>

    <div class="box3">
        <img src="3.jpg" alt="张艺兴" width="200">

    </div>





</body>

</html>
.box {
    width: 300px;
    border: 1px solid black;
    background-color: lightgreen;
}

.box {
    padding: 50px;
    width: 200px;
}

.wrap {
    width: 300px;
}

.box2 {
    background-color: lightblue;
    border: 1px solid black;
    padding: 50px;
}

.box3 {
    box-sizing: border-box;
    background-color: pink;
    border: 1px solid black;
    padding: 50px;
    width: 300px;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

4. 实例演示: margin中的同级塌陷, 嵌套传递与自动挤压, 并提出解决方案或应用场景

同级塌陷

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="4.css">
    <title>外边距</title>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>

</body>

</html>
 .box1 {
     width: 100px;
     height: 100px;
     background-color: lightblue;
 }
 
 .box2 {
     width: 100px;
     height: 100px;
     background-color: lightcoral;
 }
 
 .box1 {
     margin-bottom: 50px;
 }
 
 .box2 {
     padding-top: 30px;
 }

运行实例 »

点击 "运行实例" 按钮查看在线实例

设置宽高，计算好的高度设置一下就行了

嵌套传递

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="4.css">
    <title>外边距</title>
</head>

<body>
    <div class="box1">
        <div class="box2"></div>
    </div>


</body>

</html>
 .box1 {
     width: 200px;
     height: 200px;
     background-color: lightblue;
 }
 
 .box2 {
     width: 100px;
     height: 100px;
     background-color: lightcoral;
 }
 /* .box1 {
     margin-bottom: 50px;
 } */
 
 .box2 {
     margin-top: 50px;
 }

运行实例 »

点击 "运行实例" 按钮查看在线实例

子元素的改变可以变成主元素的改变，适当调试就行了

自动挤压

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="4.css">
    <title>外边距</title>
</head>

<body>
    <!-- <div class="box1">
        <div class="box2"></div>
    </div> -->
    <div class="box1"></div>


</body>

</html>
 .box1 {
     width: 200px;
     height: 200px;
     background-color: lightblue;
     margin-left: auto;
 }
 /* .box2 {
     width: 100px;
     height: 100px;
     background-color: lightcoral;
 } */
 /* .box1 {
     margin-bottom: 50px;
 } */
 /* .box2 {
     margin-top: 50px;
 } */

运行实例 »

点击 "运行实例" 按钮查看在线实例

利用margin添加一些值，就可以弄成自己想要的样子了

Correction status：qualified

Teacher's comments：运行代码有点问题, 在本地是好的吗?

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

phpstudy安装 2019.08.29

2019-08-31 23:03:47