前端面试知识点汇总——页面布局

最新推荐文章于 2024-11-29 17:36:45 发布

yj每天进步一点

最新推荐文章于 2024-11-29 17:36:45 发布

阅读量399

点赞数

文章标签： css css3 html5 safari

本文链接：https://blog.youkuaiyun.com/weixin_38271901/article/details/107435797

版权

由一个面试题进去知识点的回顾：
**

问：如何实现高度已知，左右宽度为30px，中间自适应的三栏布局？

若高度去掉，考虑纵向，浮动、绝对定位和网格模型不再适用
**
本文将介绍五种常见页面布局方式及其优缺点。

1. Flexbox - 弹性布局
2. Grid - 网格布局
3. Floats - 浮动布局
4. Positioning - 定位布局
5. Table layout - 表格布局
效果图下：
五种定位方案的效果图入图片描述
下来比较各种方案的优缺点：

1、Flexbox弹性布局（推荐）

优点：css3新特性，简单快捷，目前主流布局方式，解决旧特性定位时产生元素脱离文档流问题。
缺点：仅支持 IE9 以上浏览器。
解决方案：自适应div : flex:1

2、Grid网格布局（未来趋势）

优点：可将网页划分成不同的网格，任意组合不同布局，可以实现以前只能通过诸如Bootstrapcss第三方框架的布局效果。
缺点：css 实验性新特性，在浏览器中还没有得到广泛的支持。
详解可参考 CSS Grid 网格布局教程

3、Floats浮动布局

优点：比较简单，兼容性好；
缺点：浮动会使元素脱离文档流，容易出现高度塌陷等问题，需做好清理浮动(BFC 块级格式化上下文)。

以上方式虽简单，但仅适合所有元素等高的情况，因为元素浮动会脱离文档流，所以不等高可能会出现如下几种状况；

1）、未浮动元素高于浮动元素，造成围绕效果。
在这里插入图片描述
解决方案：未浮动元素创建 BFC，以下是创建BFC的五种方式。

float 除了none以外的值
overflow 除了visible 以外的值（hidden，auto，scroll ）
display (table-cell，table-caption，inline-block, flex, inline-flex)
position值为（absolute，fixed）
fieldset元素

2、传统未清除浮动问题，浮动元素高于父容器，导致高度塌陷。

解决方案：创建父元素，父容器清除浮动，效果如下

4、Positioning定位布局

优点：简单直接；
缺点：绝对定位同float布局一样会脱离文档流，高度塌陷问题。
出现高度塌陷问题，**可创建BFC来解决，**直接给父容器添加 overflow: auto; 或 hidden、scroll等。

5、table布局

优点：兼容性最佳
缺点：对 seo 不友好，且列高不能自适应，所有列高会保持一致。（且很少有人使用table布局了），但某些业务场景方便快捷，灵活使用。

清除浮动的四种方法

1、父容器添加 overflow

.container {
  overflow: hidden;
  /* 或 auto、scroll 等非默认 visible 值*/
}

2、通过伪元素清除浮动
通用样式添加 .clearfix 及其伪类样式；
给需要清除浮动的元素class添加 clearfix 类；

/* For modern browsers */
.clearfix:before,
.clearfix:after {
　　content:"";
　　display:block;
}
.clearfix:after {
　　clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.clearfix {
　　zoom:1;
}

3、父容器内添加空元素
父容器底部添加空元素;
添加样式 clear: both;。
缺点：增加冗余标签，违背了语义网的原则。

<section>
  <div style="float: left">....<div>
  ...
  <div style="clear: both;"></div>
<section>

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

注意：

1、不要通篇div,代码学会语义化：section-article-div
2、页面布局分情况灵活使用