补作业——0705作业

<!--嵌套传递，也叫做子元素外边距默认影响父元素，也会影响同级元素，兄弟元素的哥哥-->

同级塌陷针对上下两个兄弟块元素，A的下外边距和B的上外边距会覆盖，距离取指大的那个
/经测试父级元素为相对定位，子元素A为绝对定位，A的兄弟元素B仍然遵循文档流规则/

html

<div class="warp">
    <div class="position">
        <div class="news">
            <div class="title">公司新闻<span>>>></span></div>
            <ul>
                <li>这是一条新闻资讯1<span>2020.1.2</span></li>
                <li>这是一条新闻资讯2<span>2020.1.2</span></li>
                <li>这是一条新闻资讯3<span>2020.1.2</span></li>
                <li>这是一条新闻资讯4<span>2020.1.2</span></li>
                <li>这是一条新闻资讯5<span>2020.1.2</span></li>
            </ul>
        </div>
        <div class="media">
            <div class="title">媒体动态<span>>>></span></div>
            <ul>
                <li><img src="static/img/2018.png" alt=""></li>
                <li><img src="static/img/2018.png" alt=""></li>
                <li><img src="static/img/2018.png" alt=""></li>
                <li><img src="static/img/2018.png" alt=""></li>
                <li><img src="static/img/2018.png" alt=""></li>
                <li><img src="static/img/2018.png" alt=""></li>
            </ul>
        </div>
    </div>
</div>

css

.warp{
    width: auto;
}
.position{
    position: relative;
}
.news,.media{
    background: chartreuse;
    width: 50%;
    position: absolute;
}
/*经测试父级元素为相对定位，子元素A为绝对定位，A的兄弟元素B仍然遵循文档流规则*/
.news ul,.media ul{
    padding-left: 0;
    margin-top: 0;
}
.news ul li{
    line-height: 40px;
    list-style:none;
    padding-left: 15px;
}
.news ul li span{
    display:inline-block;
    float: right;
    padding-right: 15px;
}
.news ul>li:nth-child(2n){
    background: aquamarine;
}
.title{
    background: aqua;
    height: 50px;
    line-height: 50px;
    color: #FFFFFF;
    font-weight: bold;
    padding-left: 15px;
}
.title span{
    display: inline-block;
    float: right;
    padding-right: 15px;
}
.media{
    margin-left: 50%;
}
.media{
    padding-left: 20px;
    background: none;
}
.media ul{
    box-sizing: border-box;
}
.media li{
    float: left;
    list-style: none;
    padding-left: 10px;
    padding-top: 4px;
}
.media ul>:nth-child(3n){
    padding-right: 15px;
}
.media ul>:nth-child(3n+1){
    padding-left: 15px;
}
.media img{
    width: 100px;
}