百度前端任务(3)(4)(5)——巧谈前端基础html,css布局

经过了百度前端技术学院任务三和四五，在这里总结一下前端布局的一些个人见解，很多前端新手就是没有理解怎么布局而一直学不好

---

先说一下，我个人理解的前端布局的思想吧。
在前端布局的时候，
先不要设计太多什么margin,padding什么的
首先，你要清楚的是，你要的布局是什么
例如，我这里拿百度前端技术学院的任务(5)
作为例子讲解一下吧

附：百度前端技术学院的任务(5)

首先，根据题意，我们很容易得知，这是由一个头尾和内容的布局，布局采用的是类似淘宝双飞翼布局做成的CSS实现右侧固定宽度，左侧宽度自适应（点击链接即可知道具体怎么实现）

不过这不是这一篇的重点，重点是上中下布局。怎么实现呢？这里附上html和css代码

<!--首部-->
<div id="top"></div>
<!--内容-->
<div id="content"></div>
<!--尾部-->
<div id="footer"></div>

#top{
    height: 50px;
    background: black;
}

#content{
    height: 550px;
    background: gray;
}

#footer{
    height: 50px;
    background: blueviolet;
}

形成了上中下结构之后，再进行其他地方的编辑，注意，其他地方，一般要用class不要滥用id(虽然两者用起来都差不多)。接下来我，来示范一下CSS实现右侧固定宽度，左侧宽度自适应的做法吧。

附代码

<div id="content">
    <div class="left"></div>
    <div class="right"></div>
</div>

#content{
    height: 550px;
    width: 100%;
    background: gray;
}

.left{
    height: 500px;
    width: 100%;
    margin-left: -200px;
    float: left;
    background: yellow;
}

.right{
    position: absolute;
    top: 0;
    right: 0;
    height: 200px;
    width: 200px;
    background: red;
}

这样就用绝对布局实现了一个比较简单的右侧固定宽度，左侧宽度自适应的做法。

然后再在各个板块上加上各自的margin,padding属性就比较很好看了。

但是，可能有很多新手还不是很清楚margin,padding和width属性到底具体指什么，这里我用一张图说明一下吧。

具体如果还不知道怎么做，可以留言，我会细心帮你解答。