BDstudy课后学习问答：day7+day8-CSDN博客

本文链接：https://blog.csdn.net/kesin_lee/article/details/106271592

day7+day8小作业：
https://blog.csdn.net/qq_40891002/article/details/105898857?ops_request_misc=&request_id=&biz_id=102&utm_term=%E7%99%BE%E5%BA%A6%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF%E5%AD%A6%E9%99%A2%E7%AC%AC%E4%B8%83%E5%A4%A9&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduweb~default-3-105898857
day7+day8大作业：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="day7+day8.css" rel="stylesheet">
    <title>设计稿</title>
</head>
<body>
<header>
    <div class="top">
        <div class="line">
            <div class="logo">
                <span>Logo</span>

            <div class="login">
                <a href="http://www.github.com">Github</a>
                <a href="http:///www.baidu.com">Register</a>
                <a href="http://www.imooc.com">Login</a>
            </div>
        </div>
    </div>
</header>
<section>
    <div class="Banner">
        <div class="banner">
            <div class="pic-box">
                <div class="pic">1</div>
                <div class="picture">2</div>
                <div class="pic">3</div>
                <div class="pic">4</div>
            </div>
        </div>
    </div>
    <div class="Navigation">
        <div class="navigation">
            <div class="guide" id="home">HOME</div>
            <div class="guide">PROFILE</div>
            <div class="guide">ABOUT</div>
        </div>
    </div>
    <div class="content">
        <div class="content-1">
            <div class="content1">This is Content 1</div>
            <div class="content1">MaybeContent 2</div>
            <div class="content1">Content 3</div>
        </div>
        <div class="content-2">
            <div class="content2">Content 4</div>
            <div class="content2">Content 5</div>
            <div class="content2">Content 6</div>
            <div class="content2">Content 7</div>
        </div>
        <div class="content-1">
            <div class="content1">Content 8</div>
            <div class="content1">Content 9</div>
            <div class="content1">Content 10</div>
        </div>
    </div>
</section>
<footer>
    <div class="baidu"> &copy 2018 .ife.baidu.com</div>
</footer>
</body>
</html>

CSS样式

.body, .header {
    margin: 0;
}

.top {
    width: 100%;
    height: 50px;
    background-color: black;
    overflow: hidden;
    box-sizing: border-box;
    margin: 0;
}

.line {
    width: 960px;
    height: 50px;
    box-sizing: border-box;
    margin: 0 auto;
    position: relative;
}

.logo {
    float: left;
    color: white;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);

}

.login {
    float: right;
    color: white;
    font-size: 12px;
}

a {
    color: white;
}

.Banner {
    background-color: forestgreen;
    height: 300px;
    width: 100%;
}

.banner {
    width: 960px;
    height: 100%;/*如果此处不设置高度 浏览器中高度是0 所以pic-box会定位错误*/
    margin: 0 auto;
    position: relative;
}

.banner .pic-box {
    position: absolute;
    right: 0;
    bottom: 10px;
}

.pic {
    border: 1px darkgrey solid;
    display: inline-block;
    padding: 5px;
    background-color: palegreen;
    margin-right: 3px;
}

.picture {
    border: 1px black solid;
    display: inline-block;
    padding: 15px 5px 5px 5px;
    background-color: white;
    margin-right: 3px;
}

.Navigation {
    width: 100%;
    border-bottom: 1px solid #ccc;
    /*overflow: hidden;*/
}

.navigation {
    width: 960px;
    line-height: 50px;
    margin: 0 auto;
    display: flex;
}

.guide {
    width: 10%;
    height: 50px;
    border: 1px solid #ccc;
    border-radius: 20px 20px 0 0;
    margin-top: 15px;
    text-align: center;
    background-color: #D6D6D6;
    position: relative;
}

#home {
    background-color: white;
    position: relative;
    bottom:-1px;/*不会解决home没有下边框的问题，不-1px的话，Banner的下边框会显示出来*/
    border-bottom: white 1px solid;
}

.content {
    width: 960px;
    margin: 0 auto;
}

.content-1, .content-2 {
    display: flex;
}

.content1, .content2 {
    border: #cccccc 1px solid;
    padding: 80px 40px;
    margin: 10px 10px 10px 0;
    flex: 1;
    text-align: center;
}

.content1:last-child, .content2:last-child {
    margin-right: 0px;
}
.baidu {
    height: 150px;
    width: 100%;
    text-align: center;
    padding-top: 20px;
    background-color: #6a5b5b;
}

参考来源：
http://ife.baidu.com/note/detail/id/1574
http://ife.baidu.com/note/detail/id/1265
七种实现左侧固定，右侧自适应两栏布局的方法:
https://segmentfault.com/a/1190000010698609
圣杯布局：
https://alistapart.com/article/holygrail/
双飞翼布局：
https://blog.csdn.net/qq_38128179/article/details/86542447
CSS深入理解流体特性和BFC特性下多栏自适应布局：
https://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/
三种三栏网页宽度自适应布局方法：
https://www.zhangxinxu.com/wordpress/2009/11/%E6%88%91%E7%86%9F%E7%9F%A5%E7%9A%84%E4%B8%89%E7%A7%8D%E4%B8%89%E6%A0%8F%E7%BD%91%E9%A1%B5%E5%AE%BD%E5%BA%A6%E8%87%AA%E9%80%82%E5%BA%94%E5%B8%83%E5%B1%80%E6%96%B9%E6%B3%95/

Position相关概念及使用Postion进行布局的场景和方法
答：
Flexbox相关概念及使用Flexobx进行布局的场景和方法
答：
掌握常用的两栏、三栏布局的各种方式
答：
什么时候会触发BFC呢？常见的如下:
答：float的值不为none。
overflow的值为auto,scroll或hidden。
display的值为table-cell, table-caption, inline-block中的任何一个。
position的值不为relative和static。
绝对定位position:absolute下，父元素高度塌陷/无法撑开父盒子的原因和解决方案
答：绝对定位的元素完全脱离文档流，所以他们的尺寸无法影响到父元素的尺寸，即父元素高度塌陷或为0。
想实现绝对定位还能撑开父元素，可通过
①JavaScript实现：获取到绝对定位的子元素的高度，再设置给父元素。
或者
②用 float: left / float:right 还有 margin 来调整位置，子元素再通过父元素设置的overflow:hidden来撑开父元素。
③ 对父元素设置min-height: calc(100% - 其他子元素高度和)
calc(100% - height)中的-前后有空格！