当前位置: 首页 > Web前端 > CSS

5中间自适应布局的解决方法

时间:2023-03-31 11:10:53 CSS

前言我们在做页面的时候经常会遇到页面布局相关的内容,面试的时候也经常被问到,所以今天就把关于页面布局的内容总结一下。问题:如何实现三栏布局(固定高度,左-中-右结构)假设高度已知,请写一个三栏布局,其中左右宽度均为300px,中间为self-自适应。看完上面的题目,有经验的人可能会觉得很简单。仔细想一想,如果我们写的话,我们能写出多少解呢?一般想到的有两种,float和position定位。其实除了这两种之外,还有另外三种类型可以写。我一一介绍一下:方案一(float浮动)

我是中间的自适应元素——浮动
原理:左右两边由于两个div浮动不在文档流中,所以中心会上移,导致三栏布局的效果(前提是高度相同)优点:兼容性高缺点:需要清除浮动,防止影响其他元素如果高度不固定,中间内容会被拉长,并且左右两侧不会被拉伸在一起。方案二(绝对定位)
我是中间的自适应元素——绝对定位原理:使用绝对定位和宽度固定左右两侧的div,中间div的宽度会有自适应的效果优点:快速缺点:如果父元素脱离了文档流,子元素肯定脱离了文档流。使用场景不多。如果中间元素的高度增加,两边元素的高度不会增加,所以只会拉伸中间的div。方案三(弹性布局)我是中间的自适应元素--flex布局原理:设置父元素为flex布局,然后设置中间元素flex为1,达到自适应效果优点:实际中常见的缺点development:IE8及以下浏览器不支持。如果高度不固定,中间内容的高度展开后,两边也会随之展开。方案四(表格布局)我是中间的自适应元素--table原理:设置父元素为表格布局,并且那么每个child元素都是teble-cells,给左右grid设置一个固定的宽度,中间的grid可以达到自适应的效果优点:兼容性好,可以作为ie8以下flex布局的替代品缺点:Limitations如果高度不固定,中间拉伸时,左右两边也会拉伸,类似flex方案5(网格布局)<艺术icleclass="左-中-右">我是中间的自适应元素——网格布局原理:将父元素设置为网格布局,然后指定每个网格的高和宽,只需为每个网格分别设置颜色优点:技术比较新,方便缺点:兼容性不是很好,如果高度不固定,向中间元素添加文本不会拉伸它