0903基本选择器,与内外边距应用处理

1. 实例演示相邻选择器与兄弟选择器,并分析异同
   <ul>
      <li>1</li>
      <li id="two">2</li>
      <li>3</li>
      <li id="id4">4</li>
      <li>5</li>
      <li>6</li>
      <li id="id7">7</li>
      <li>8</li>
      <li>9</li>
   </ul>
   
   <hr class="clearn">
   异同:
   同:均会选择自身相邻的下一个元素.
   异:相邻选择器仅选一个,而兄弟选择器会选择自身以后的所有的.
   <hr class="clearn">
   
   2. 实例演示:nth-child() 和 :nth-of-type()选择器,并分析异同
   <hr class="clearn">
   异同点:
   同:都可以根据位置定位选择操作元素
   异:nth-of-type 需要考虑元素的类型.而nth-child 仅仅考虑位置即可
   
   <hr class="clearn">
   
   3. 实例演示:padding 对盒子大小的影响与解决方案, 使用宽度分离或box-sizing
   <h4>宽高分离</h4>
   
   <div class="box1">
      <div class="box2">
          <img src="1.jpg" alt="">
      </div>
   </div>
   <hr class="clearn">
   <h4>box-sizing</h4>
   <div class="box3">
      <img src="1.jpg" alt="">
   </div>
   4. 实例演示: margin中的同级塌陷, 嵌套传递与自动挤压, 并提出解决方案或应用场景
   <hr class="clearn">
   <h4>同级塌陷</h4>
   <div class="box4"></div>
   <div class="box5"></div>

css.

ul li{
   list-style: none;
   width:100px;
   height: 100px;
   background-color: #0a6ea7;
   border-radius:50% ;
   margin: 10px;
   text-align: center;
   line-height: 100px;
   float: left;

}

#two +*{
   background-color: yellow;
}


#id4 ~*{
   background-color: #0AA699;
}
.clearn{
   clear: both;
}

ul :nth-child(2){
   background-color: #0d3625;
}

li:nth-of-type(4){
   background-color: red;
}

.box1 {
   width: 300px;
}

img{
   width: 200px;
   height: 200px;
}

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

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

.box4 {
   width: 300px;
   height:300px;
   background-color: #0a6ea7;
}
.box5 {
   width: 300px;
   height:300px;
   background-color: #0a6999;
}