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

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

崔泽的博客
崔泽的博客原创
2019年09月04日 15:31:23623浏览
  1. 实例演示相邻选择器与兄弟选择器,并分析异同

相邻选择器:+*

选择选中相邻的一个

兄弟选择器:~+

选择选中后面的全部切一定要是同级,多个

实例

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

运行实例 »

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

1.png


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

运行实例 »

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

2.png

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

运行实例 »

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

3.png4.png

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添加一些值,就可以弄成自己想要的样子了


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议