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

发布于:2021-07-22 02:17:21

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


问:如何实现高度已知,左右宽度为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;。
??缺点:增加冗余标签,违背了语义网的原则。



....

...

相关推荐

最新更新

猜你喜欢