第4章 常用选择器与布局原理 作业2019年9月3日 20点00分

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

答：

相邻选择器：可选择紧接在另一元素后的元素，且二者有相同父元素，中间为”+“ 链接

实例

/*相邻选择器*/
#bg-blue + * {
    background-color: yellow;

兄弟选择器：可选择同级的全部元素 且父元素相同，中间为”~“ 链接

实例

/* 兄弟选择器*/
#bg-blue ~ * {
    background-color: yellow;
}

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

nth-child(): 如果关注点是位置用 nth-child

实例（将每个DIV中的第二个子元素背景设置为绿色）

/*将每个DIV中的第二个子元素背景设置为绿色*/
div :nth-child(2) {
    background-color: lightgreen;
}

nth-of-type(): 即关注位置，又关注类型的用nth-of-type()

实例（将所有的第二个P标签的背景颜色设置为黄色）

P:nth-of-type(2) {
    background-color: yellow;
}

效果：

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

宽度分离原则

     即CSS中的width属性不与影响宽度的padding/border（有时候包括margin）属性一同使用，即一个div的宽度设计分离成一个父div给定width属性，一个子div在父div下给定padding/border这些属性，如此一来，便于维护，在width不变的情况下（width不改变，只），只需要修改padding/border值就可以完成 ,不过现在不常用了。

宽度分离实例(html)

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

宽度分离实例（css)

*宽度分离*/

.wrap {
    width: 300px;
}

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

box-sizing：

现在以box-sizing为主流，语法：box-sizing: content-box|border-box|inherit:，常用的为：box-sizing: border-box;

border-box    指定宽度和高度（最小/最大属性）确定元素边框。也就是说，对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。    

box-sizing实例(html)

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

</div>

box-sizing实例(css)

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

效果：

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

margin外边距有3个特征：

(1).同级塌陷：垂直方向的高度塌陷

实例

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

运行实例 »

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

实例

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

.box2 {
    width: 100px;
    height: 100px;
    background-color: lightcoral;
    margin-top: 50px;
}

通过修改 box2的上边距像素为50px，发现上边的盒子陷入到下边盒子的边距里面去了，谁向谁塌陷，遵循谁大以谁为准。

(2).嵌套传递：子元素的外边距自动传递到父元素

传递前实例：

实例html

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

实例css

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

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

嵌套后：

给子元素box4 设置一个顶部边距为30像素时，margin-top: 30px，父级元素box3，也自动添加了一个顶部边距30像素

如图：

这样的效果，一般并不是我们想要的，可以给父级元素加个内边距 padding-top: 50px;但是父级的盒子就会被撑大了

如图：

解决这个问题：在父级加 “ box-sizing: border-box;”或者修改高度 是同一个效果，只需添加一处即可

实例

.box3 {
    width: 200px;
    height: 200px;
    background-color: lightblue;
    margin-bottom: 30px;
    padding-top: 50px;
    box-sizing: border-box;
}

实现效果：

(3).自动挤压：某一个元素设置外边距的时候，会尽可能的自动挤压，尽可能的将位置留给对方尽可能的扩大。

解决方案，可以通过给外边距，来给盒子指定位置，比如加一个margin：

实例

.box5 {

    margin: 30px auto;

}

这样 的效果是让这个盒子顶部外边距为30像素，左右自适应。这样盒子就居中了，离顶部距离30像素，如图