小白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样式,看看他们对纵布局的影响。”

“好的!我现在就开始练习~”

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值