简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 选择器与内外边距使用方法（margin,padding使用）-2019年9月4日
Blogger Information
Blog 27
fans 0
comment 0
visits 26613
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
选择器与内外边距使用方法（margin,padding使用）-2019年9月4日
渊的博客
Original
1368 people have browsed it

9月3日作业:


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>
    <style>
        ul{
            margin:0;
            padding-left:0;
            border:1px dashed red;
        }

        ul li{
            list-style-type: none;
            width:40px;
            height: 40px;
            background-color: #ffaa0c;
            /* border:1px solid black; */

            /* 水平和垂直的居中 */
            text-align: center;
            line-height: 40px;

            border-radius: 50%;

            /* 将一个块级元素转化成内联元素 块支持宽高，内联不支持宽高*/
            display: inline-block;
            box-shadow: 2px 2px 1px #444;
        }
        /* 相邻选择器,相邻就是邻居的意思，太远就不算邻居了 */
        #bg-blue + *{
            /* background-color:yellow; */
        }

        /* 兄弟选择器 */
        #bg-blue ~ *{
            background-color:yellow;
        }
    </style>
</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>
</body>
</html>

运行实例 »

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

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

nth-child(n) : 匹配父元素中的第 n 个子元素，元素类型没有限制。
nth-of-type(n) : 匹配同类型中的第n个同级兄弟元素。
n可以是一个数字，一个关键字，或者一个公式，比如：nth-child(odd) 奇数 ,nth-child(even) 偶数。

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>nth-child和nth-of-type选择器</title>
    <style>
        ul{
            margin:0;
            padding-left:0;
            border:1px dashed red;
        }

        ul li{
            list-style-type: none;
            width:40px;
            height: 40px;
            background-color: wheat;
            text-align: center;
            line-height: 40px;
            border-radius: 50%;
            display: inline-block;
            box-shadow: 2px 2px 1px #444;
        }
        ul :nth-child(2){
            background-color: coral;
        }
        ul li:nth-of-type(4){
            background-color: darkgreen;
            color:white;
        }
    </style>
</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>
</body>
</html>

运行实例 »

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

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">
    <title>padding 对盒子大小的影响与解决方案</title>
    <style>
        .box1{
            width:300px;
            height:300px;
            background-color:blueviolet; 
            margin: 0 auto;
            box-sizing:border-box;
            padding-top: 20px;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            margin-top: 20px;
        }
    </style>
</head>
<body>
     <div class="box1">
         <div class="box2"></div>
     </div>
</body>
</html>

运行实例 »

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


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">
    <title>margin中的同级塌陷, 嵌套传递与自动挤压, 并提出解决方案或应用场景</title>
<style>
/********** 1、同级塌陷 **********/
.boxa {
    /*box-sizing: border-box;*/
    width: 150px;
    height: 150px;
    background-color: #cbe0cc;
}

.boxb {
    width: 100px;
    height: 100px;
    background-color:blueviolet;
}

.boxa{
    margin-bottom: 50px;
}
.boxb{
    margin-top: 30px;
}

/*2、 嵌套传递 */

.box1 {
    /*box-sizing: border-box;*/
    width: 350px;
    height: 350px;
    background-color: #cbe0cc;
}


.box2 {
    width: 150px;
    height: 150px;
    margin: 30px auto;
    background-color:blueviolet;
}

/*3、自动挤压 */
.box3 {
    /*box-sizing: border-box;*/
    width: 350px;
    height: 350px;
    background-color: lightblue;
}

.box3 {
    margin: 0 auto;
}

</style>
</head>
<body>
    <!-- 同级塌陷 -->
    <div class="boxa">
        
    </div>
    <div class="boxb"></div>
    <!-- /*2、 嵌套传递 */ -->
    <div class="box1">
        <div class="box2"></div>
    </div>
    <!-- /*3、自动挤压 */ -->
    <div class="box3">
        <div class="box4"></div>
    </div>
</body>
</html>

运行实例 »

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


解决方案或应用场景

明明给里面的div设置了margin属性，但是实际上却是外面的div有了margin属性，这个就叫做嵌套传递。

解决方法：有给父元素加一个padding属性，把子元素顶下去。


自动挤压：

应用场景：用于居中

如果给一个元素设置左边边距为自动值的话，那么浏览器就会把尽可能大的空间给到这个元素。同理，如果是右边距是自动值的话，就右边距给到最大。所以如果左右都是auto的话，那么这个元素就会居中了。可以用在想把元素在浏览器居中的时候使用，非常方便。


Correction status：qualified

Teacher's comments：nth-child也可以限定元素, 所以有时间与nth-of-type很难区分的, 全凭程序员来决定
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！