Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 第八期0903作业
Blogger Information
Blog 6
fans 0
comment 0
visits 3880
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
第八期0903作业
宏利的博客
Original
500 people have browsed it

1.实例演示相邻选择器与兄弟选择器,并分析异同

1.1相邻选择器

用来选中定位标签同级的下一个标签，只能选中一个

1.2兄弟选择器

用来选中定位标签同级的后面所有标签

demo

<!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>Document</title>
    <!-- <link rel="stylesheet" href="/public/static/index/css/demo.css"> -->
</head>
<style>
    p {
        background-color: aqua;
        border-radius: 50%;
        float: left;
        margin-left: 5px;
        height: 50px;
        width: 50px;
        line-height: 50px;
        text-align: center;
    }
    /* 相邻选择器 */
    
    #ppp+p {
        background: pink;
    }
    /* 兄弟选择器 */
    
    #ppp+p~p {
        background: cadetblue;
    }
</style>
<body>
    <div>
        <p id="ppp">1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
        <p>8</p>
    </div>
</body>
</html>


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

2.1 nth-child()  

选择父标签下指定的索引的标签 不论类型 冲第一个开始计数  该标签重在索引

:冒号签名选择器仅仅用于定位 获取其父标签

2.2 nth-of-type()

指定类型的第N个标签 冲第一个计数  该标签重在计数

:冒号签名选择器即用于定位，又用于类型过滤

demo

<!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>Document</title>
    <link rel="stylesheet" href="/public/static/index/css/demo.css?a={:time()}">
</head>
<style>
    span,
    p {
        margin: 10px 10px;
        background-color: aqua;
        border-radius: 50%;
        float: left;
        height: 50px;
        width: 50px;
        line-height: 50px;
        text-align: center;
    }
    
    span {
        background: pink;
    }
    /* nth-child */
    
    p:nth-child(8) {
        background: red;
    }
    /* nth-of-type  */
    
    p:nth-of-type(3) {
        background: black;
    }
</style>
<body>
    <div>
        <p id="ppp">1</p>
        <p>2</p>
        <span>1</span>
        <p>3</p>
        <span>2</span>
        <p>4</p>
        <span>3</span>
        <p>5</p>
        <span>4</span>
        <p>6</p>
        <p>7</p>
        <p>8</p>
    </div>
</body>
</html>


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

padding 会增加盒子的大小导致盒子被撑开，可以使用宽度分离和box-sizing 来解决

demo

<!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>Document</title>
    <link rel="stylesheet" href="/public/static/index/css/demo1.css?a={:time()}">
</head>
<style>
    /* 宽高200 */
    
    .child {
        background-color: aqua;
        height: 150px;
        width: 150px;
        padding: 25px;
        box-sizing: border-box;
    }
    
    .div {
        border: solid 2px red;
        height: 500px;
        width: 500px;
    }
</style>
<body>
    <div class="div">
        <div class="child">
        </div>
    </div>
</body>
</html>


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

1.同级塌陷

2个垂直盒子上下外边距会自动合并，合并后值最大的为新的外边距

demo

<!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>Document</title>
    <link rel="stylesheet" href="/public/static/index/css/demo1.css?a={:time()}">
</head>
<style>
    .child {
        background-color: aqua;
        height: 200px;
        width: 200px;
        margin-bottom: 30px;
    }
    
    .child-son {
        height: 30px;
        width: 30px;
        background: pink;
        /* 嵌套传递 */
        margin-top: 50px;
    }
    
    .div {
        border: solid 2px red;
        height: 500px;
        width: 500px;
    }
</style>
<body>
    <div class="div">
        <div class="child">
        </div>
        <div class="child-son"></div>
    </div>
</body>
</html>


2.嵌套传递

嵌套传递当子盒子有margin-top时激活嵌套传递

解决办法 给父盒子设置padding 以达到子盒子固定位置效果

demo

<!DOCTYPE html>
<html>

<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>Document</title>
    <link rel="stylesheet" href="/public/static/index/css/demo1.css?a={:time()}">
</head>
<style>
    .child {
        background-color: aqua;
        height: 200px;
        width: 200px;
        padding-top: 50px;
    }
    
    .child-son {
        height: 30px;
        width: 30px;
        background: pink;
        /* 嵌套传递 */
        /* margin-top: 50px; */
    }
    
    .div {
        border: solid 2px red;
        height: 500px;
        width: 500px;
    }
</style>

<body>

    <div>
        <div>
            <div></div>
        </div>
    </div>





</body>

</html>

3.自动挤压

自动挤压应用于 盒子自动居中场景

demo

<!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>Document</title>
    <link rel="stylesheet" href="/public/static/index/css/demo1.css?a={:time()}">
</head>
<style>
    .child {
        background-color: aqua;
        height: 200px;
        width: 200px;
        /* 自动挤压达到横向居中效果 */
        margin: auto auto;
    }
    
    .div {
        border: solid 2px red;
        height: 500px;
        width: 500px;
    }
</style>
<body>
    <div class="div">
        <div class="child"></div>
    </div>
</body>
</html>


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