css中圣杯布局和双飞翼布局的介绍（附代码）

来源：懂视网责编：小采时间：2020-11-27 18:47:50

css中圣杯布局和双飞翼布局的介绍（附代码）

css中圣杯布局和双飞翼布局的介绍（附代码）:这篇文章给大家介绍的内容是关于css中圣杯布局和双飞翼布局的介绍（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。圣杯布局<div id="header">#header</div> <div id="co

推荐度：

点击下载本文 文档为doc格式

导读css中圣杯布局和双飞翼布局的介绍（附代码）:这篇文章给大家介绍的内容是关于css中圣杯布局和双飞翼布局的介绍（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。圣杯布局<div id="header">#header</div> <div id="co

圣杯布局（flexbox实现）

<div id="HolyGrail">
 <div id="header">#header</div>

 <div id="container">
 <div id="center" class="column">#center</div>
 <div id="left" class="column">#left</div>
 <div id="right" class="column">#right</div>
 </div>

 <div id="footer">#footer</div>

 body {
 min-width: 550px; 
 }
 #HolyGrail {
 display: flex;
 min-height: 100vh;
 flex-direction: column;
 }
 #container {
 display: flex;
 flex: 1;
 }
 #center {
 background-color: #e9e9e9;
 flex: 1;
 }
 #left {
 background-color: red;
 order: -1;
 width: 150px;
 }
 #right {
 background-color: blue;
 width: 150px;
 }
 #header, 
 #footer {
 height: 50px;
 background-color: #c9c9c9;
 }

如果不考虑ie10及以下的浏览器，那么可以使用flex来实现圣杯布局。而且圣杯布局可以通过让container填充高度来使得footer达到一个sticky的效果。
flex兼容性

双飞翼布局

圣杯布局和双飞翼布局解决的问题是一样的，就是两边定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏p并排，以形成三栏布局。不同的地方在于解决中间p内容不被遮挡的思路上面

圣杯布局的为了中间内容不被修改，是通过包裹元素的padding-left和padding-right来使得内容p置于中间，然后再通过相对定位position:relative，配合right或left属性让左右两栏不则当中间内容。
双飞翼布局的解决方案是：通过再中间元素的内部新增一个p用于放置内容，然后通过左右外边距margin-left和margin-right为左右两栏留出位置。
双飞翼布局多了1个p标签，少用了4个css属性。少用了padding-left，padding-right，左右两个p用相对布局position: relative及对应的right和left，多了margin-left，margin-right。

<div id="header">#header</div>

 <div id="container">
 <div id="center" class="column">
 <div id="center-content">#center</div>
 </div>
 <div id="left" class="column">#left</div>
 <div id="right" class="column">#right</div>
 </div>

 <div id="footer">#footer</div>

 body {
 min-width: 500px; 
 }
 #container {
 overflow: auto; /* BFC */
 }
 #container .column {
 height: 200px;
 float: left;
 }
 #center {
 background-color: #e9e9e9;
 width: 100%;
 }
 #center-content {
 margin-left: 180px;
 margin-right: 150px;
 } 
 #left {
 width: 180px;
 background-color: red;
 margin-left: -100%;
 }
 #right {
 background-color: blue;
 width: 150px; 
 margin-left: -150px; 
 }

 #header, 
 #footer {
 background-color: #c9c9c9;
 }

css中圣杯布局和双飞翼布局的介绍（附代码）

推荐度：

点击下载本文 文档为doc格式

标签：代码 css 圣杯布局

热门焦点

css中圣杯布局和双飞翼布局的介绍（附代码）

css中圣杯布局和双飞翼布局的介绍（附代码）

圣杯布局（flexbox实现）

双飞翼布局

css中圣杯布局和双飞翼布局的介绍（附代码）

最新推荐

猜你喜欢

热门推荐