圣杯布局和双飞翼布局_0

时间：2023-03-30 22:32:45 CSS

ps：参考DotHide的文章《关于圣杯布局》，圣杯布局和双飞翼布局的区别经典布局圣杯布局#header

#center

#left

#right

#footer实现的效果主要在容器里，左边和rgith是固定宽度，先渲染中心，自适应宽度。正文{最小宽度：500px；}#container{溢出：自动；/*BFC*/padding-left:180px;填充右：150px；}#container.column{高度：200px；位置：相对；向左飘浮;}#center{背景颜色：#e9e9e9;宽度：100%；}#left{背景色：红色；宽度：180px；右：180px；margin-left:-100%}#right{背景颜色：蓝色；宽度：150px；右边距：-150px；}#header,#footer{背景颜色：#c9c9c9;}这个方案有几点需要注意：center元素放在left和right之前，让center先渲染，用户首先看到页面的主要内容。container(width:100%)包裹三列内容，通过padding-left和padding-right为左右两列腾出空间。center,left,right都设置了一个左浮动（float:left），所以容器内部是一个浮动流。通过给left元素设置margin-left:-100%，left移动到容器的左上角，然后通过position:relative移动到容器的padding-left位置；右：180px。将margin-right:-150px设置为右侧元素，使其移动到容器的padding-right位置。ps：margin-left和margin-right利用了浮动流的特点，让第一行可以同时容纳center、left、right三个元素。圣杯布局（flexbox实现）#header#居中#left#right#footerbody{最小宽度：550px;}#HolyGrail{显示：flex；最小高度：100vh；弹性方向：列；}#container{显示：弹性；弹性：1；}#center{背景颜色：#e9e9e9;弹性：1；}#left{背景色：红色；顺序：-1；宽度：150px；}#right{背景色：蓝色；宽度：150px；#header,#footer{高度：50px；背景色：#c9c9c9；}如果不考虑ie10及以下浏览器，可以使用flex实现圣杯布局。而圣杯布局可以让footer通过让容器填满高度来达到粘性的效果。FlexCompatibilityDoubleFlyingWingLayoutHolyGrailLayout和DoubleFlyingWingLayout解决的是同一个问题，即两边固定宽度的三列布局和自适应中间列。中间栏要放在文档流的前面优先渲染。圣杯布局和双飞翼布局问题的解决方法和前半部分是一样的，就是三列都是浮动的，只是左右两列加了负边距，让他们排成一行与中间的列div形成三列布局。区别在于中间div的内容没有被遮挡的思想。上面的圣杯布局是为了让中间的内容不被修改。通过wrapping元素的padding-left和padding-right将contentdiv放在中间，然后位置相对定位：relative，加上right或者left属性，这样左右两列就不是中间的内容了.双飞翼布局的解决方案是：在中间元素内部添加一个div来放置内容，然后通过左右边距margin-left和margin-right为左右两列预留空间。双飞翼布局多了一个div标签，少了四个css属性。padding-left和padding-right用的比较少，左右div使用相对布局位置：relative和对应的right和left，增加了margin-left和margin-right。#header

#center#left#right#footerbody{最小宽度：500px;}#container{溢出：自动；/*BFC*/}#container.column{height:200px;向左飘浮;}#center{背景颜色：#e9e9e9;宽度：100%；}#center-content{margin-left:180px;右边距：150px；}#left{宽度：180px；背景色：红色；左边距：-100%；}#right{背景色：蓝色；宽度：150px；左边距：-150px；}#header,#footer{背景颜色：#c9c9c9;}

上一篇：设置边距的一点解释：-100%在圣杯布局左框上

下一篇：怎么画流程图，怎么用软件画流程图

圣杯布局和双飞翼布局_0相关文章