zoukankan      html  css  js  c++  java
  • 详解 CSS 七种三栏布局技巧

    作者:林东洲 链接:https://zhuanlan.zhihu.com/p/25070186 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 三栏布局,顾名思义就是两边固定,中间自适应。三栏布局在开发十分常见,那么什么是三栏布局?比如我打开某东的首页: 映入眼帘的就是一个常见的三栏布局:即左边商品导航和右边导航固定宽度,中间的主要内容随浏览器宽度自适应。 下面围绕的这样的目的,即左右模块固定宽度,中间模块随浏览器变化自适应,想要完成的最终效果如下图所示: 红色和蓝色宽度固定,绿色宽度自适应,下面七种方法实现的最终效果跟这个差不多,可能会稍有不同。 下面七种技巧各有千秋,在开发中可以根据实际需求选择适合自己的方法进行编码。 1. 流体布局
    左右模块各自向左右浮动,并设置中间模块的 margin 值使中间模块宽度自适应。 缺点就是主要内容无法最先加载,当页面内容较多时会影响用户体验。 2. BFC 三栏布局 BFC 规则有这样的描述:BFC 区域,不会与浮动元素重叠。因此我们可以利用这一点来实现 3 列布局。
    缺点跟方法一类似,主要内容模块无法最先加载,当页面中内容较多时会影响用户体验。因此为了解决这个问题,有了下面要介绍的布局方案双飞翼布局。 3. 双飞翼布局
    利用的是浮动元素 margin 负值的应用,感兴趣的同学可以上网搜搜原理。 主体内容可以优先加载,HTML 代码结构稍微复杂点。 4. 圣杯布局
    跟双飞翼布局很像,有一些细节上的区别,相对于双飞翼布局来说,HTML 结构相对简单,但是样式定义就稍微复杂,也是优先加载内容主体。 5. Flex 布局
    简单实用,未来的趋势,需要考虑浏览器的兼容性。 6. Table 布局
    缺点:无法设置栏间距 7. 绝对定位布局
    简单实用,并且主要内容可以优先加载。
  • 相关阅读:
    4 Apr 18 软件开发目录 logging模块的使用 序列化(Json, Pickle) os模块
    3 Apr 18 内置函数 列表生成式与生成器表达式 模块的使用之import 模块的使用之from…import…
    2 Apr 18 三元表达式 函数递归 匿名函数 内置函数
    30 Mar 18 迭代器 生成器 面向过程的编程
    29 Mar 18 函数 有参、无参装饰器
    28 Mar 18 函数
    27 Mar 18 函数的参数
    26 Mar 18 函数介绍
    23 Mar 18 文件处理
    22 Mar 18 补充数据类型+字符编码+文件处理
  • 原文地址:https://www.cnblogs.com/libin-1/p/6366352.html
Copyright © 2011-2022 走看看