前端网页布局方式

·  阅读 47
前端网页布局方式

常见的布局方法以及它们的优缺点

1、Flex弹性布局

  • 优点:css3新特性,简单快捷,目前主流布局方式,解决旧特性定位时产生元素脱离文档流问题。
  • 缺点:仅支持 IE9 以上浏览器。 2、Grid - 网格布局
  • 优点:可将网页划分成不同的网格,任意组合不同布局,可以实现以前只能通过诸如Bootstrapcss第三方框架的布局效果。
  • 缺点:css 实验性新特性,在浏览器中还没有得到广泛的支持。 3、Floats - 浮动布局
  • 优点:比较简单,兼容性好;
  • 缺点:浮动会使元素脱离文档流,容易出现高度塌陷等问题,需做好清理浮动。

4、Positioning - 定位布局

  • 优点:简单直接;
  • 缺点:绝对定位同float布局一样会脱离文档流,高度塌陷问题。

清除浮动的四种方法(推荐使用前两种,生产环境推荐第二种。)

  1. 父容器添加 overflow
.container { 
    overflow: hidden; 
    /* 或 auto、scroll 等非默认 visible 值*/
}
复制代码
  1. 通过伪元素清除浮动
  • 通用样式添加 .clearfix 及其伪类样式;
  • 给需要清除浮动的元素class添加 clearfix 类;
.clearfix:before,
         .clearfix:after {
           content:"";
           display:block;
         }
         .clearfix:after {
           clear:both;
         }

         /* For IE 6/7 (trigger hasLayout) */
         .clearfix {
           zoom:1;
         }
复制代码
  1. 父容器内添加空元素
  • 父容器底部添加空元素;
  • 添加样式 clear: both;
    缺点:增加冗余标签,违背了语义网的原则。
  1. 浮动父容器

缺点:影响到后面元素的定位,而且有时候,父容器是定位死的,无法变成浮动。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改