《小白H5成长之路13》块容器纵布局的小知识

“小白，网页分析的怎么样了？”

“小有感触，我发现很多网站头部和底部容器都是通栏的，浏览器窗口多宽，他们就有多宽。这些好像是自动适应的，主体部分一般都是固定的宽度，并且是居中显示的！”

“不错，小白，看得很仔细，你之前也自己看了html的标签，那么你应该知道什么是“块”吧！”

“知道，块元素（容器）默认宽度跟它父容器的宽度一样，而且前后有换行符。如果不做特殊的样式控制，每个块容器两边都不会有其他的块容器，假如我在html的body里面写三个div层，他们肯定是上下排列的。”

“恩，不错，那你现在写一个div容器，然后给他设定点css样式，让他看起来舒服就可以，我们来做几个小测试！”

老朱接着说道：“我们只设定了这个层的背景色和一些文本样式，没有设定div的宽度，因此在我们改变浏览器窗口大小的时候，div层的宽度会随它父容器的宽度进行变化，这里的div父容器是body，而body的内外边距都是0，所以div的宽度跟浏览器窗口一样宽。”

“然后我们再写一个div容器，让他的宽度固定为400像素，容器的其他样式随意设定一下就可以了。”

“怎么样！主体区域的宽度固定以后，浏览器窗口不管怎么变他的宽度都不会发生变化。”

小白若有所思的说道：“我看到别人网页上中间主体区域宽度固定，但却是居中的，这个怎么实现呢？”

“很简单，你只需要把他的margin样式设定成auto，他就主动根据父容器居中了。”

“在我们使用块容器布局的时候，如果是纵向布局，有时我们常常让他们之间保持5个像素的距离。因此可以给主体区域设定一个margin-top:5px;”

“做网页布局的时候，上中下三个容器的布局是第一步，因此在做之前要想好这三个容器宽度是自适应，还是固定宽度，想好再下手。”

老朱接着说：“今天我们测试的div容器布局并没有考虑到边框、内边距、外边距的影响，你练习的时候可以给容器设定上这些css样式，看看他们对纵布局的影响。”

“好的！我现在就开始练习～”

---

想学H5的朋友可以关注老炉，您的关注是我持续更新《小白H5成长之路》的动力！