相邻选择器与兄弟选择器、nth-child() 和 :nth-of-type()选择器的异同；padding 对盒模型的影响与解决以及margin中的同级塌陷, 嵌套传递与自动挤压的方案解决和应用--2019年9月3日22时

问题目录

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

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

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

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

• 1. 相邻选择器：选择该元素相邻一个元素。用+*
  

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

#bg-blue+* {
    background-color: yellow;
}

      兄弟选择器：又称相邻兄弟选择器。选择该元素后面所有的元素。用～*

#bg-blue~* {
    background-color: yellow;
}

• 2.伪类:子元素选择器 ul空格 （根据位置来进行选择。相邻和兄弟选择器必须失效后才能用）。如：nth-child()

  
  

  
  

  
  

ul :nth-child(6) {
    /* 选中某一个元素 ，括号中为索引，从1开始*/
    background-color: coral;
}

       伪类: 类型选择器 ul li。推荐使用。如：nth-of-type ()

ul li:nth-of-type(5) {
    background-color: darkgreen;
    color: white;
}

         二者功能一样，但关注点不同, 如果关注点是位置: 用nth-child。既关注位置, 又关注类型, 用 nth-of-type

• 3.内边距padding会撑开盒子，box-sizing默认为内容content宽度。当盒子有border或者padding时，盒子box的宽度就不是我们所设置的那样，而是盒子的实际宽度= width + border + padding；盒子的内容content宽度=width；盒子内容的实际宽度 content = width - padding - border;

  改变的方法:

  （1）宽度分离：给box设置一个父级div。当在给box在设置border，padding时就会在div内部改变，而不会改变box的宽度，这个时候box的宽度等于父级元素div的宽度。

/*宽度分离*/
.wrap {    /*父级div宽度*/
    width: 300px;
}

.box2 {
    padding: 50px;
    background-color: lightblue;
    border: 1px solid black;
}

<!--宽度分离-->
<div class="wrap">
    <div class="box2">
        <img src="static/images/girl.jpg" alt="小姐姐" width="200">
    </div>
</div>

实际的宽度=300px；

实际的内容content宽度=300-50-50-1-1px；

（2）用box-sizing  :将盒子Box的宽度从content-box内容宽度定义为border-box宽度。

<!--box-sizing-->
<div class="box3">
    <img src="static/images/girl.jpg" alt="小姐姐" width="200">
</div>

/*box-sizing*/
.box3 {
   width: 300px;
   box-sizing: border-box;
   padding: 50px;
   background-color: pink;
   border: 1px solid black;
}

实际的宽度=300px；

实际的内容content宽度=300-50-50-1-1px；

• 4.margin中的同级塌陷、嵌套传递、自动挤压

（1）同级塌陷：垂直方向上的高度塌陷，以margin大者为相距。应用情景---容器与容器之间的布局定位。

    <!--1. 同级塌陷-->
    <div class="box1"></div>
    <div class="box2"></div>

/* 1.同级塌陷 */
.box1 {
    width: 100px;
    height: 100px;
    background-color: lightblue;
}
.box2 {
    width: 100px;
    height: 100px;
    background-color: lightcoral;
}
.box1 {
    margin-bottom: 50px;
}
.box2 {
    margin-top: 30px;
}

（2）嵌套传递：两个块级元素成嵌套级关系，子元素的外边距margin会自动传递到父元素。应用情景---相互嵌套的容器之间的布局定位。

    <!--2. 嵌套传递-->
    <div class="box3">
        <div class="box4"></div>
    </div>

/* 2.嵌套传递 */
.box3 {
    /* box-sizing: border-box; */
    width: 200px;
    height: 200px;
    background-color: lightblue;
}

.box4 {
    width: 100px;
    height: 100px;
    background-color: lightcoral;
}

.box4 {
    margin-top: 50px;
}

解决办法：在父级盒子上将我们子元素上面的外边距转为父级盒子上的内边距

（3）自动挤压：某个元素设置它所有的外边距时候，它会产生一个自动挤压，将指定位置的空间留给对方，尽可能的扩大。应用情景---单个容器的布局定位。

  <!--3. 自动挤压-->
    <div class="box5"></div>

/********** 3. 自动挤压 **********/

.box5 {
    /*box-sizing: border-box;*/
    width: 150px;
    height: 150px;
    background-color: lightblue;
}

.box5 {
    margin: 30px auto;
    /* 上下外边距30，左右居中 */
}