css圣杯模式的HTML代码,css圣杯布局是什么？

圣杯布局是两边固定宽度，中间自适应的三栏布局，其中，中间栏放到文档流前面，保证先行渲染。下面本篇文章就来给大家介绍一下css圣杯布局，希望对大家有所帮助。

圣杯布局是什么三列布局，中间宽度自适应，两边定宽；

中间栏要在浏览器中优先展示渲染；

实现

HTML代码如下：

middle

left

right

实现一：使用浮动

1、先给左右列固定宽度，然后给中间列的宽设为100%，都设置为向左浮动：#middle {

background-color: lightpink;

height: 300px;

width: 100%;

float: left;

}

#left {

background-color: red;

height: 300px;

width: 100px;

float: left;

}

#right {

background-color: aqua;

height: 300px;

width: 100px;

float: left;

}

此时它的效果为：

2、让左右列与中间列显示在一行

给#left设置margin-left: -100%;，给#right设置margin-left: -100px;，那么此时我的页面显示为：

但是有没有发现我的middle这个字不见了，那是因为被压住了，此时我的左右列覆盖到了中间列上面

3、中间盒子自适应

那么想让中间盒子自适应，就给我们的父元素加padding值：#container {

padding: 0 100px;

}

此时的效果为：

与上面的图相比，两边多了空，那么此时我的middle还是没有出现，所以说明我的左右两列还是压着中间那列的，所以我们就应该将左右两列给加定位，然后让他们分别向左右移动：#left {

position: relative;

left: -100px;

}

#right {

position: relative;

right: -100px;

}

此时我们的圣杯布局就完成啦：

实现二：用flex布局

使用flex布局就简单多了呢，代码如下：#middle {

background-color: lightpink;

height: 300px;

display: flex;

flex:1;/*简写，1,1，auto的意思*/

}

#left {

background-color: red;

height: 300px;

flex: 0 0 100px;/*默认为横向的，所以这里的100px相当于宽度*/

order:-1;/*设置left的位置在middle之前*/

}

#right {

background-color: aqua;

height: 300px;

flex: 0 0 100px;/*默认为横向的，所以这里的100px相当于宽度*/

}

#container{

display: flex;

flex:1;/*简写，1,1，auto的意思*/

}

那么我们的圣杯布局也就完成啦：

更多前端开发知识，请查阅 HTML中文网！！

css圣杯模式的HTML代码,css圣杯布局是什么？相关推荐

从零开始学前端：CSS元素模式的转换和CSS三大特性 --- 今天你学习了吗？（CSS：Day12）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:复习课程 - 今天你学习了吗?(CSS:Day11) 文章目录从零开始学前端:程序猿小白也可以完全掌握! ...
css 窗口模式,如何：使用“CSS 属性”窗口
如何:使用"CSS 属性"窗口 11/15/2012 本文内容您可以使用**"CSS 属性"**窗口来查看并修改级联样式表 (CSS) 样式属性. 对于 We ...
ES5-12 【utils】继承深入、call、apply、圣杯模式、模块化
继承深入这两种方式继承不够合理(为什么) 将实例作为子类的原型在子类的构造函数内部借用父类的构造函数将父类的原型作为子类的原型(会修改父类的原型) css圣杯布局(左右宽度固定.中间自适应) 目 ...
css盒子教程,彻底弄懂css盒子模式(div布局快速入门)_css教程
实现结构与表现分离在真正开始布局实践之前,再来认识一件事--结构和表现相分离,这也用CSS布局的特色所在,结构与表现分离后,代码才简洁,更新才方便,这不正是我们学习CSS的目的所在吗?举个例来说P是 ...
怎么设置php的css颜色代码,CSS的文本字体颜色如何设置
这里要介绍的是网页设置颜色包含有哪些:网页颜色规定规范. 1.常用颜色地方包含:字体颜色.超链接颜色.网页背景颜色.边框颜色 2.颜色规范与颜色规定:网页使用RGB模式颜色网页中颜色的运用是网页必不 ...
css 实现标签切换,CSS_纯CSS实现Tab切换标签效果代码，本文实例讲述了纯CSS实现Tab切 - phpStudy...
纯CSS实现Tab切换标签效果代码本文实例讲述了纯CSS实现Tab切换标签效果代码.分享给大家供大家参考.具体如下: 这是一款纯CSS实现的Tab简洁版,很不错的效果,希望大家喜欢. 运行效果截图如 ...
html 怪异模式,CSS_浅谈CSS编程中的怪异模式，怪异模式盒模型今天学习了 - phpStudy...
浅谈CSS编程中的怪异模式怪异模式盒模型今天学习了一下css3的box-sizing属性,顺便又温习了一下css的盒模型,最后觉得有必要对盒模型做一个全面整理. 先不考虑css3的情况,盒模型一共 ...
html div css盒子,CSS盒子模式一(DIV布局快速入门)_html/css_WEB-ITnose
中心最新招了几十个人,我也成小旋风了,看来这个山头还得呆几天.毕竟有几十口子人哪,咋能撒手不管啊!我就先发个贴热热身!也希望前几届的师哥师姐多多指教. 我们在网页设计中常听的属性名:内容(conte ...
彻底弄懂CSS盒子模式一(DIV布局快速入门)
彻底弄懂CSS盒子模式一(DIV布局快速入门) 作者:唐国辉实例网页网址:http://www.blueidea.com/articleimg/2007/03/4545/css2.ht ...

css圣杯模式的HTML代码,css圣杯布局是什么？

css圣杯模式的HTML代码,css圣杯布局是什么？相关推荐

最新文章

热门文章