css相邻选择器与兄弟选择器的使用以及Paddin与Margin的使用 2019年9月3日

1、相邻选择器与兄弟选择器实例演示如下：

实例

 <ul>
        <li>1</li>
        <li>2</li>
        <li class="item">3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li id="liu">8</li>
        <li>9</li>
        <li>10</li>
    </ul>

实例

ul{
    margin:0;
    padding-left: 0;
    border:1px solid green;
}
/* 层级选择器 */
ul li{
    list-style: none;
    width:50px;
    height: 50px;
    background-color: gold;
    /* border: 1px solid black; */
    border-radius: 50%;
    /* 水平和垂直居中显示 */
    text-align: center;
    line-height: 50px;
    /* 将块级元素变为内联元素 */
    display: inline-block;
/* 为li元素加一个阴影 */
box-shadow: 2px 2px 2px #666;
}
/* 相邻选择器 */
#liu+*{
background-color: red;
border: 2px solid blue;
}
/* 兄弟选择器 */
.item~*{
background-color: green;
border: 2px solid blue;
}

相邻选择器的运行效果如下图所示

我们可以从图中看到相邻选择器只会选择紧挨着8号元素的后面一个元素9号的背景被改变了，而十号没有改变背景。

兄弟选择器的效果如下图所示

从兄弟选择器可以看出，兄弟选择器会把3号后面所有的元素选中并改变背景，由于9号刚刚被前面的相邻选择器选中并没有改变颜色，是因为相邻选择器的等级要高于兄弟选择器。

这两个选择器都是选择后面的元素，而相邻选择器是选择紧挨着该元素后面的第一个元素，而兄弟选择器是选择跟该元素平级的后面的所有元素。

2、nth-child()和nth-of-type() 实例演示如下：

实例

<div>
     <p>汽车</p>
     <li>火车</li>
     <li>轮船</li>
    </div>
    <div>
         <p>***</p>
        <p>轮船</p> 
   </div>

实例

 div :nth-child(2){
            background-color: green;
        }
        div p:nth-of-type(2){
            background-color: red;
        }

div :nth-child(2)运行效果如下图：

div p:nth-child(2)运行效果如下图：

这两个选择器虽然都是选择第二个元素但两个选择的意义却不同，第一个选择器是选择每个div下面的第二个元素它关注的是元素的位置，而第二个选择器是选择每个div下的第二个元素且第二个元素还必须是p类型的标签，它既关注元素的位置也关注元素的类型。

3、padding对盒子大小的影响 实例演示如下：

实例

 <!-- 将图片在容器里居中显示 -->
    <div class="box1"><img src="static/image/girl.jpg" alt="美女" width="200"></div>
    <!-- 使用宽度分离将图片居中显示 -->
    <div class="wrap">
        <div class="box2"><img src="static/image/girl.jpg" alt="美女" width="200"></div>
    </div>
    <!-- 使用box-sizing -->
    <div class="box3"><img src="static/image/girl.jpg" alt="美女" width="200"></div>

实例

.box1{
    width:300px;
    background-color: wheat;
   border:2px solid red;
}
.box1{
    padding: 50px;
    width: 196px;/*如果这里写出200px的话,总宽度就会变成304*/
    /* 左浮动 */
    float: left;
}
/* 宽度分离 */
.wrap{
    width:300px;
/* 设置左浮动以及左外边距 */
    float: left;
    margin-left: 10px;
}
.box2{
    background-color:aqua;
    border:2px solid red;
    padding: 50px;

}
/* 使用box-sizing */
.box3{
    float: left;
    margin-left: 10px;
    width: 300px;
    padding:50px;
    /* 将宽度作用于边框上这时候盒子就不会被撑开 */
    box-sizing:border-box;
    background-color:aqua;
    border:2px solid red;
   
}

运行效果图如下：

上面使用了三种方法将图片居中显示，而我们最常用的还是最后一种。

4、margin中的同级塌陷，嵌套传递与自动挤压 实例演示如下

实例

 <!-- 同级塌陷 -->
    <div class="box1"></div>
    <div class="box2"></div>
    <!-- 嵌套传递 -->
    <div class="box1">
        <div class="box2"></div>
    </div>
    
    <!-- 自动挤压 -->
    <div class="box3"></div>

实例

/* 同级塌陷哪一个值小就会往值大的塌陷 */
.box1{
    width: 150px;
    height: 150px;
    background-color: red;
    margin-bottom: 50px;
}
.box2{
    width:150px;
    height: 150px;
    background-color: blue;
    margin-top:30px;
}
/* 嵌套传递 */
.box1{
    width: 200px;
    height: 200px;
    background-color: red;
    /* 设置内上边距，然后将高度设置回来，因为一旦设置了padding就会撑开盒子 */
     padding-top:20px;
      height: 180px;
   
}
.box2{
    width: 100px;
    height: 100px;
    background-color: green;
    /* margin-top: 20px; 当在这里为box2盒子设置上外边距时，会发现没有用 */
}
/* 自动挤压 */
.box3{
    width:200px;
    height: 200px;
    background-color: blue;
    /* margin-left: auto;
    margin-right: auto; */
    margin: 0 auto;
}

因为截图看不出效果，所以我这里就没截图了，所以只需要看代码就可以了，需要的可以将代码复制下去运行看效果。

总结：

这里讲解了相邻选择器与兄弟选择器，相邻选择器只会选择紧挨着选择元素后面的第一个元素，而兄弟选择器会选择该元素后面平级的所有元素，两个的作用是不一样的，nth-child()是用于选择某一个特定的元素而nth-fo-type是用于选择特定的元素和特定的元素类型，两者所关注的点不一样，一个元素一旦设置了padding就会撑开盒子，常常解决的方法就是，设置了padding值后再将宽度重新设置，或宽度分离就是为该元素在套一个容器，还有就是将宽度作用到边框上面而不是内容上，这样就不会撑开盒子了，margin有三个特性一个是同级塌陷、嵌套传递、自动挤压使用时记住这三个需要注意的点就可以了。