本文概述本文将介绍以下几种常见的布局：三栏布局的实现方式有很多种，本文重点介绍圣杯布局和双飞翼布局。通过冲压实现三栏布局还有其他几种方式。1.单列布局常见的单列布局有两种：一种是与页眉、内容和页脚等宽的单列布局。如何实现对于第一种，先设置width:1000px；ormax-width:1000pxforheader,content,footer（两者的区别是当屏幕小于1000px时，前者会有滚动条，后者不会。是的，显示实际宽度);然后设置margin:auto实现居中即可。
本文概述本文将介绍以下几种常见的布局：三栏布局的实现方式有很多种，本文重点介绍圣杯布局和双飞翼布局。通过冲压实现三栏布局还有其他几种方式。1.单列布局常见的单列布局有两种：一种是与页眉、内容和页脚等宽的单列布局。如何实现对于第一种，先设置width:1000px；ormax-width:1000pxforheader,content,footer（两者的区别是当屏幕小于1000px时，前者会有滚动条，后者不会。是的，显示实际宽度);然后设置margin:auto实现居中即可。
left
div>right
right
。父母{溢出：隐藏;zoom:1;}.left{浮动：左；margin-right:20px;}.right{overflow:hidden;zoom:1;}注意：如果侧边栏在右边，注意渲染顺序。也就是说，在HTML中，先写侧边栏，再写主要内容2、Flex布局Flex布局，也叫灵活框布局，只需几行代码就可以实现各种页面的布局。//html部分同上。parent{display:flex;}.right{margin-left:20px;flex:1;}3.grid布局Grid布局是一种基于网格的二维布局系统，目的是优化用户界面设计。//html部分同上.parent{display:grid;网格模板列：自动1fr；grid-gap:20px}三列布局特点：中间列宽度自适应，两侧固定宽度1.HolyGrail布局①特点是特殊的三列布局，两边宽度也是固定的侧面和中间的自适应。唯一不同的是，dom结构必须先写在中间栏，这样才能先加载中间栏。.container{padding-left:220px;//为左右两列腾出空间padding-right:220px;}.left{浮动：左；宽度：200px；高度：400px；背景：红色；左边距：-100%；位置：相对；左：-220px；}.center{浮动：左；宽度：100%；高度：500px；背景：黄色；;左边距：-200px；位置：相对；右：-220px；}