9-3作业

9-3作业

作业1.  相邻选择器与兄弟选择器

相邻选择器：给标签后一个同级元素添加样式

兄弟选择器：给标签后面所有元素添加样式

<ul>
    <li>01</li>
    <li>02</li>
    <li>03</li>
    <li id="bg-blue">04</li>
    <li>05</li>
    <li>06</li>
    <li id="color_red">07</li>
    <li>08</li>
    <li>09</li>
    <li>10</li>
    <div>11</div>
</ul>
<style>
/* 相邻选择器：给标签后一个同级标签添加样式 */
#color_red ~ *{
    background-color:red;
}
/* 兄弟选择器： 给标签后面所有同级标签添加样式*/
#bg-blue + *{
    background-color:blue;
    font-size: 25px;
}
</style>

作业2.  nth-child() 和 :nth-of-type()选择器,

nth-child()：

 nth-of-type()：  

<ul>
    <li>01</li>
    <li>02</li>
    <li>03</li>
    <li id="red">04</li>
    <li>05</li>
    <li>06</li>
    <li>07</li>
    <li>08</li>
</ul>
<ul>
    hahha
</ul>
<style>
/* 选择器后面，冒号前面。没空格表示当前元素，有空格表示当前元素子元素 */
 /* 匹配当前元素同级同样的第几个标签 */
ul li:nth-child(5){
    color: red;
    font: 30px;
}
/* 匹配当前元素父级下的同样的标签 */
ul:nth-of-type(2){
    background-color: blue;
}
</style>

作业3.  padding 对盒子大小的影响与解决方案

宽度分离：设置宽度为padding撑开两边后的宽度

box-sizing：设置样式为border-box ，让padding或margin撑开的内外边距不影响父级宽度

<div class="warp">
    <div class="box">
        <img src="images/4578.jpg" width="500" alt="大风车">
    </div>
</div>
<div class="yy">
    <img src="images/00.jpg" width="500" alt="小姐姐">
</div>
<style>
    /* 宽度分离 */
    .warp{
        width: 600px;
    }
    .warp .box{
        background-color: blueviolet;
        border: 2px solid red;
        padding: 50px;
    }

    /* box-sizing 去除内外边距影响*/
    .yy{
        width: 700px;
        /* box-sizing: border-box; */
        background-color: burlywood;
        border: 1px solid black;
        padding: 100px;
    }
</style>

作业4.  margin中的同级塌陷, 嵌套传递与自动挤压,

<!-- 同级塌陷：两外边距冲突时，以边距大的标签为准 -->
<div class="demo1"></div>
<div class="demo2"></div>

<!-- 嵌套传递：子级的外边距传递给父级 ，
    解决方案：给父级加内边距-->
    <ol>
        <li>嵌套传递</li>
    </ol>

<header>向中间自动挤压</header>
<style>
.demo1{
    width: 300px;
    height: 200px;
    margin-bottom: 50px;
    border: 1px solid lightcoral;
    background-color: red;
}
.demo2{
    width: 500px;
    height: 100px;
    margin-top: 30px;
    border: 1px solid slateblue;
    background-color: blueviolet;
}
ol{
    border: 1px solid orangered;
    margin: 0;
}
ol li{
    width: 50px;
    height: 200px;
    margin-top: 100px;
    /*  */
    background-color: blue;
}
header{
    width: 1200px;
    height: 80px;
    background-color: aqua;
    margin: 0 auto;
}
嵌套传递是否总是传递？？