布局

1.实现单栏式布局

2.实现三栏式布局

3.实现圣杯布局

  • 圣杯布局
  • 圣杯布局有个BUG，就是当缩放浏览器没有达到2*nav+footer的宽度时，布局结构会破坏，掉盒子
  • 原因是nav盒子的负margin是以ct父盒子的内容宽度做为值，当浏览器缩放导致ct的盒子宽度比nav盒子的main还小时，就会出现布局结构破坏

4.实现双飞翼布局

  • 双飞翼布局
    • 关键点是在main里嵌套盒子作左右margin，ct父盒子的内容不会像圣杯布局一样被padding减小，最后导致浏览器缩放应该布局结构

5.实现如下页面 页面范例

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • css布局
    按照是否相应浏览器宽度变化划分： 固定宽度布局：body的width是一个固定值，当浏览器的窗口缩小时，底部出现滚...
    lingfighting阅读 593评论 0赞 0
  • CSS经典布局整理
    三栏式布局 涉及浮动和清除浮动，主要讲解“圣杯”和“双飞翼”两种解决方法。这两种方法实现的都是三栏布局，两边的盒子...
    紫电倚青霜阅读 2,381评论 0赞 6
  • CSS 布局说——可能是最全的
    前言 现在，我们被称为前端工程师。然而，早年给我们的称呼却是页面仔。或许是职责越来越大，整体的前端井喷式的发展，使...
    Calvin李阅读 512评论 0赞 0
  • CSS布局说——可能是最全的
    前言 现在，我们被称为前端工程师。然而，早年给我们的称呼却是页面仔。或许是职责越来越大，整体的前端井喷式的发展，使...
    Layzimo阅读 802评论 1赞 9
  • web前端教程：CSS 布局十八般武艺都在这里了
    CSS布局 布局是CSS中一个重要部分，本文总结了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及单...
    web前端学习阅读 1,635评论 1赞 38