【CSS-1你知多少】三栏布局七种方案及优缺点对比总结

时间：2023-03-30 14:56:07 CSS

html*{填充：0；保证金：0；}.layout{边距顶部：30px；}.layoutarticlediv{最小高度：100px;}题目：假设高度已知，请写一个三栏布局，其中宽度左栏右栏各300px，中间自适应。常见的布局方式：浮动（float）布局、定位（Position）布局、弹性（flex）布局、表格（table）布局、网格（grid）布局、圣杯布局、双飞翼布局。公共样式先把公共样式放在头部，代码如下：页面布局html*{填充：0；保证金：0；}.layout{边距顶部：30px；}.layoutarticlediv{最小高度：100px;}不同的布局方式使用

标签来定义一个文档内的一个节（section，section）；

标签指定独立的内容。1.浮动布局.layout.float.left{float:left;宽度：300px；背景颜色：红色；}.layout.float.right{浮动：右；宽度：300px；背景色：黄色；}.layout.float.center{背景颜色：蓝色；}

浮动解决方案

1.这是三栏布局浮动方案的中间部分

加高

增加高度

优点：兼容性更好；简单的代码；一般在清浮处理无其他问题的前提下。缺点：脱离了文档流，存在占用空间的问题（如上图-块中内容超出时，中间部分占据左右位置）；清除float没做好，出现高度塌陷的问题（解决）。2.位置布局

绝对定位方案

2.这个是三栏布局绝对定位方案的中间部分

增加高度

优点：速度非常快，配合js使用非常方便缺点：绝对定位与文档流分离，也就是说下面的所有子元素也会与文档流分离文档流，导致这种方法的有效性和可用性都比较差。3、弹性（flex）布局

flexbox方案

3.这是三列布局flexbox方案的中间部分

增加高度

增加高度优点：该方案可以解决上述两种方案的不足，堪称完美；目前移动端的布局也是都使用flexbox缺点：不兼容IE8及以下浏览器。4.表格（表格）布局

表格布局方案

4.这个是表格中间部分的布局方案

加高

优点：易于实现；兼容性好，IE8不支持flex但支持table缺点：当其中一个cell的高度超过时，两边的cell也会一起变高，有时候这种效果并不是我们想要的。5、网格布局.layout.grid.left-center-right{display:grid;宽度：100%；网格模板行：100px；网格模板列：300??px自动300px；}.layout.grid.left{背景颜色：红色；}.layout.grid.center{背景颜色：黄色；}.layout.grid.right{背景颜色：蓝色；}

网格布局方案

5.这个是三列布局的网格布局方案

增加高度

增加会溢出

优点：把复杂的事情简单化；CSS3新标准（追热点怎能错过？）圣杯布局来自文章InSearchoftheHolyGrail，双飞翼布局来自淘宝UED两者的实现方式虽然略有不同，但都遵循以下几点：两侧宽度固定，中间宽度自适应。一个额外的

标签6.HolyGrailLayout

圣杯布局方案

6、这是三列布局圣杯布局方案

增加高度

1.首先定义整个布局的DOM结构，主要部分为left-center-right包裹的center,left,right三列，其中定义了center在前面2.如果左右两边固定宽度为300px，先在.left-center-right上设置padding-left和padding-right，为左右两列预留相应的空间3.然后是三列分别设置width、floating和positioning(position)，其中floating和positioning可以设置为三列的通用样式。根据floating的特点，由于center的宽度为100%，即占据所有空间第一行的，所以左右它是s“挤”到第二行。4、接下来的工作就是把left放在之前预留的位置上，这里使用负边距（nagativemargin）5、这里使用相对定位，使用left:-300px和margin-left:-100%将left的位置移动到left在原位置基础上增加300px完成left的放置；使用right:-300px和margin-left:-300px将right的位置在原来位置的基础上向右移动300px，完成右边的放置。6、布局完成，但是最后一步还需要考虑，就是页面的最小宽度：为保证布局效果正常显示，由于两边的宽度是固定的，所以需要设置一个最小宽度给到页面了，但这可不是简单的300+300=600px那么简单。回想一下left之前使用的position:relative，所以表示在中心开始的区域还有左边的宽度。所以页面的min-width应该设置为300+300+300=900px。当宽度小于900px时，结果如下：注意：在#center中，包含了一条语句width:100%，这是中间列自适应的关键。有的朋友可能会觉得没必要设置这个语句，因为他们认为如果不设置width，center会默认设置为父元素（容器）宽度的100%。但是需要注意的是，中心是浮动元素。由于浮动的包裹属性，它会自动“缩小”到内容的大小，而无需显式设置宽度。如果去掉width:100%，当中间一栏不包含或者包含内容少的时候，整个布局就会“塌陷”，这个效果就达不到了——圣杯布局。原理：借助其他非主元素，覆盖其父元素的padding值（内边距）所占的宽度。在同一个cup中，非main元素只占据整个容器的paddingvalue部分；优点：结构简单，没有多余的DOM层。缺点：当中心部分的宽度小于左侧部分的宽度时，会发生布局混乱。(center

双飞翼布局方案

7.这是一个三栏布局的双飞翼布局方案

增加高度

1.先定义DOM结构，用center包裹内容，left,center,right还在同一层2.按照类似圣杯布局的思路，先设置每列的宽度和浮动，设置center，left,andrighttofloat:left,andinsidethecenter，因为内容没有设置浮动，所以它的宽度默认为center的100%宽度。3、左右边固定宽度为300px。不同的是，圣杯改变了中心的内缘。这里改变了center包下内容的外边距margin-left和margin-right。4、同圣杯布局一样，使用left:-300px和margin-left:-100%将左边的位置从原来的位置移动300px，完成左边的放置；使用right:-300px和margin-left:-300px将right的位置在原位置的基础上向右移动300px，完成right的放置。5、最后计算最小页面宽度：由于双飞翼布局没有使用position:relative进行定位，所以最小页面宽度应该是300+300=600px。但是，当页面宽度缩小到600px左右时，会占据中间栏的宽度，使其内容被右侧栏覆盖，如下图：原理：在内容主体部分添加一个外层元素center，和其他非主体元素占据的空间是内容主体部分的外边距空间（outermargin），像鸟的两只翅膀，与主体部分中心分开（content和center是内容的元素类名）上面的双飞翼布局）。优点：支持各种宽高变化，通用性强。缺点：多了一层DOM结构，增加了渲染树生成的计算量。所有布局个人总结：圣杯布局一定要考虑最小宽度，注意中心宽度小于左边的情况。flex布局更实用但要注意兼容性问题。可以根据自己的业务场景采用不同的布局方式。

上一篇：uniapp单人全栈开发商城小程序，完成真实项目

下一篇：css导航菜单+下拉菜单

【CSS-1你知多少】三栏布局七种方案及优缺点对比总结相关文章