简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 9.3作业
Blogger Information
Blog 12
fans 1
comment 0
visits 8244
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
9.3作业
lee的学习记录博客
Original
710 people have browsed it

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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }
        
        ul {
            width: 314px;
            height: 54px;
            border: 1px solid red;
            box-sizing: border-box;
            margin: 10px auto;
            font-size: 0px;
            /* 内联元素的父级元素上设置font-size: 0px;可以让内联样式的间隔取消；请在子级设置字体大小 */
        }
        
        li {
            width: 50px;
            height: 50px;
            line-height: 50px;
            display: inline-block;
            border-radius: 50%;
            border: 1px solid #000;
            text-align: center;
            list-style: none;
            font-size: 14px;
        }
        
        #blue {
            background: cornflowerblue
        }
        
        #blues {
            background: cornflowerblue
        }
        
        #blue+* {
            background: darkcyan
        }
        /* 相邻选择器，选择与之相邻的一个元素的样式变化 */
        
        #blues~* {
            background: rgb(103, 10, 189)
        }
        /* 兄弟选择器，选择与之相邻的后面所有的元素的样式变化 */
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li id="blue">2</li>
        <li>3</li>
        <li id="blues">4</li>
        <li>5</li>
        <li>6</li>

    </ul>
</body>

</html>

运行实例 »

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


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

:nth-child() 元素选择器；简单的来说，是用于位置选择的；

:nth-of-type()是类选择器；用于选择某个类，不能简单的按照位置这个概念去理解。

实例

<!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>
    <style>
        div :first-child {
            background: blue;
            /* nth-child()元素选择器，这里的意思是每个div里的第一个元素位置，背景颜色都为蓝色 */
        }
        
        div:nth-of-type(3) :nth-child(2) {
            background: chocolate
        }
        /* nth-of-type()是类选择器，这里的意思是在第3个div类里的第2个元素位置，背景颜色都为橙色 */
    </style>
</head>

<body>
    <div>
        <li>1.1</li>
        <p>1.2</p>
        <li>1.3</li>
        <li>1.4</li>
    </div>

    <div>
        <p>2.1</p>
        <p>2.2</p>
        <li>2.3</li>
        <li>2.4</li>
    </div>

    <div>
        <p>3.1</p>
        <p>3.2</p>
        <li>3.3</li>
        <li>3.4</li>
    </div>
</body>

</html>

运行实例 »

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


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

2种写法来解决padding对盒子大小的影响，

第1种为宽度分类的写法，核心在于，实际宽度的值与padding之间的值的相减；

第2种写法，使用box-sizing属性；这样就不用担心宽度高度的值需要减去padding的值。

实例

<!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="css/style.css">
    <!--这里只做对比说明  -->

    <style>
        /* 第一种宽度分离的写法 */
        
        .box_1 {
            width: 150px;
            /*因为使用了padding，所以宽度需要减去20*2的长度，才是真正的300px  */
            height: 150px;
            /*因为使用了padding，所以高度需要减去10*2的长度，才是真正的200px  */
            background: darkslateblue;
            margin: 10px;
            padding: 75px;
        }
        
        .box_2 {
            width: 150px;
            /*因为使用了padding，所以宽度需要减去20*2的长度，才是真正的260px  */
            height: 150px;
            /*因为使用了padding，所以高度需要减去10*2的长度，才是真正的180px  */
            background: rgb(5, 236, 63);
        }
        /* 第二种box-sizing: border-box的写法 */
        
        .box_3 {
            width: 300px;
            height: 300px;
            background: darkslateblue;
            margin: 10px;
            padding: 75px;
            box-sizing: border-box;
            /* 使用  box-sizing: border-box这个属性，可以忽略padding值造成的影响*/
        }
        
        .box_4 {
            width: 150px;
            height: 150px;
            background: rgb(5, 236, 63);
        }
    </style>
</head>

<body>
    <div class="box_1">
        <div class="box_2"></div>
    </div>

    <div class="box_3">
        <div class="box_4"></div>
    </div>

</body>

</html>

运行实例 »

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


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

4.1margin中的同级塌陷

margin塌陷只发生在真正意义的块级元素上（浮动跟那些inline-block不算），浏览器应该是希望我们块级元素只设置上下其中的一个margin就好了，避免margin塌陷。

解决办法：可以将块级元素改为内联元素，或者在块级元素外面嵌套一层父级，采用浮动的做法，父级记得使用

overflow: hidden来清浮动。

4.2嵌套传递的解决方法

子级的marin-top会影响父级的变化；解决方法是父级采用padding；或者用浮动

4.3自动挤压

主要用在导航，或者居中显示等特殊位置。


实例

<!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>
    <style>
        /*同级传递的问题  */
        
        .box {
            overflow: hidden;
            width: 150px;
        }
        /* 这里设置了一个父级，主要用于下面margin中的同级塌陷的解决，更简单的方法是设置其中一个块元素的margin就可以了。 */
        
        .box1 {
            width: 150px;
            height: 150px;
            background: blue;
            margin-bottom: 10px;
            float: left;
        }
        
        .box2 {
            width: 150px;
            height: 150px;
            background: rgb(5, 219, 41);
            margin-top: 20px;
            float: left;
        }
        /*嵌套传递的问题  */
        
        .box3 {
            width: 150px;
            height: 150px;
            background: rgb(216, 98, 30);
            text-align: center;
            /* overflow: hidden; 解决方法是父级采用padding；或者用浮动,记住要清浮动*/
        }
        
        .box4 {
            width: 50px;
            height: 50px;
            background: rgb(62, 1, 131);
            margin-top: 50px;
            /* 这里主要是嵌套传递的一个问题；子级的marin-top会影响父级的变化；解决方法是父级采用padding；或者用浮动 */
            float: left;
        }
        /*自动挤压的问题  */
        
        .box5 {
            width: 150px;
            height: 150px;
            background: rgb(10, 115, 235);
            text-align: center;
            margin: 10px auto;
            /* 上下挤压10px；然后居中显示 */
            line-height: 150px;
        }
    </style>
</head>

<body>
    <!-- 同级塌陷演示 -->
    <div class="box">
        <div class="box1">1</div>
        <div class="box2">2</div>
    </div>
    <!-- 嵌套传递演示 -->
    <div class="box3">
        <div class="box4">4</div>
    </div>
    <!-- 自动挤压演示 -->
    <div class="box5">居中显示</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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！