css圣杯模式的HTML代码,三种方式实现圣杯布局
圣杯布局的三种实现
圣杯布局是一种很常见的css布局。他要求:
上部和下部各自占领屏幕所有宽度。
上下部之间的部分是一个三栏布局。
三栏布局两侧宽度不变,中间部分自动填充整个区域。
中间部分的高度是三栏中最高的区域的高度。
本文会用三种方法来实现圣杯布局,分别是浮动,flexbox以及css grid。
浮动实现
实现原理
外层框架
.header,.footer{
height:200px;
width:100%;
background:red;
}
.container{
padding-left:200px;
padding-right:300px;
}
填充三栏
这一步骤,首先给底部区域清除浮动,防止跟随上边的区域一起浮动。
另外:把中,左,右三个区域设置成度浮动。给左右两块区域固定的宽度,中间部分的宽度设置成100%。
这样实现下来,因为浮动的关系,[middle]会占据[container]的所有部分,而左右两块区域都会被挤到下面,但是,由于第一步设置了内边距的关系,[container]的左右各剩余了一块区域,且宽度与左右区域相同。
.header,.footer{
height:40px;
width:100%;
background:red;
}
.footer{
clear:both;
}
.container{
padding-left:200px;
padding-right:300px;
}
.container div{
float:left;
}
.middle{
width:100%;
background:yellow;
}
.left{
width:200px;
background:pink;
}
.right{
width:300px;
background:aqua;
}
移动左侧区域
接下来要做的就是把左右两块区域挪到空出来的内边距空间里去。
先移动左边,新加一个样式 margin-left:-100%。这样一来,因为浮动关系,就把左边块上移到了[middle]左侧,与其交织在一起,而右侧栏就自动往左移动。然后再给左侧栏一个偏移量,偏移量恰好是其宽度,这一步要给[container]的position设成relative
.header,.footer{
height:40px;
width:100%;
background:red;
}
.footer{
clear:both;
}
.container{
padding-left:200px;
padding-right:300px;
}
.container div{
postion:relative;
float:left;
}
.middle{
width:100%;
background:yellow;
}
.left{
width:200px;
background:pink;
margin-left:-100%;
right:200px;
}
.right{
width:300px;
background:aqua;
}
移动右边
同上一步的原理一样,把右侧区域也给弄上去,设置负外边距和本身宽度相同就行了。
.header,.footer{
height:40px;
width:100%;
background:red;
}
.footer{
clear:both;
}
.container{
padding-left:200px;
padding-right:300px;
}
.container div{
postion:relative;
float:left;
}
.middle{
width:100%;
background:yellow;
}
.left{
width:200px;
background:pink;
margin-left:-100%;
right:200px;
}
.right{
width:300px;
background:aqua;
margin-right:-300px;
}
特别完美~
flexbox弹性盒子实现
弹性盒子用来实现圣杯布局特别简单。只需要把中间的部分用flex布局即可。
.header,.footer{
height:40px;
width:100%;
background:red;
}
.container{
display: flex;
}
.middle{
flex: 1;
background:yellow;
}
.left{
width:200px;
background:pink;
}
.right{
background: aqua;
width:300px;
}
很简单,在写html的时候,因为不再涉及到浮动,只需要按照左中右的顺序来写就可以了。左右两块区域的宽度写死,把中间的区域的flex属性设置成1就可以了。
css grid网格
grid是一种新的布局方式,截止2018年初,绝大多数浏览器都已经支持css grid。
其原理就是把页面的区域划分成一个一个的网格,就和围棋的棋盘一样。
用网格来解决圣杯问题,可以摆脱弹性盒子时需要格外加一个[container]的问题,也就是左中右三款区域不需要在他们外边包装一个额外的div。
先看一下代码:
body{
display: grid;
}
#header{
background: red;
grid-row:1;
grid-column:1/5;
}
#left{
grid-row:2;
grid-column:1/2;
background: orange;
}
#right{
grid-row:2;
grid-column:4/5;
background: cadetblue;
}
#middle{
grid-row:2;
grid-column:2/4;
background: rebeccapurple
}
#footer{
background: gold;
grid-row:3;
grid-column:1/5;
}
简单说一下代码的实现。回头会专门看一下css grid的细节。
首先给最外层的body设成display:grid。当然,是外层父级元素即可,不一定是body。
grid-row就是说由上到下,#header占据第1格,#left,#middle,#right占据第2格,#footer占据第3格。
而grid-column表示,在横向从左向右,分成了五格。其中#header和#footer占据全部。#left占据第1格,#middle占据第2到第4格,#right占据第5格。
不管是实现起来还是理解起来都很方便。
关于css grid,下次继续总结。
小结
总的来说,我认为使用弹性盒子布局实现圣杯模式是最方便最快速且不用担心移动端的适配问题。而css grid网格,并不是所有浏览器都支持,所以,暂时不太建议大规模使用。至于,第一种方法,面试的时候准备准备还是很有好处的。
css圣杯模式的HTML代码,三种方式实现圣杯布局相关推荐
- CSS与HTML结合使用的三种方式
基础知识:CSS语法规则 选择器:选择器包括标签名..class的值.#id的值等等.浏览器根据"选择器"决定受CSS样式影响的HTML元素(对应的标签) 属性:属性是你所要改变 ...
- CSS透明效果的实现的三种方式
三种方式分别是:opacity.rgba.transparent 那么pacity.rgba.transparent都可以设置透明的时候,几者的区别是什么? 一. opacity是样式名,通过样式值的 ...
- html5 css透明效果,css中实现背景透明的三种方式
css中实现背景透明通常有如下3种方式,以下是这三种方式的不透明度为80%的写法: css3的opacity:x,x 的取值从 0 到 1,如opacity: 0.8 css3的rgba(red, g ...
- 三种方式实现圣杯布局
圣杯布局的三种实现 圣杯布局是一种很常见的css布局.他要求: 上部和下部各自占领屏幕所有宽度. 上下部之间的部分是一个三栏布局. 三栏布局两侧宽度不变,中间部分自动填充整个区域. 中间部分的高度是三 ...
- 如何在SpringWEB项目或者Springboot启动时直接执行业务代码(三种方式)
我的博客原文链接 前言 通常的我们的项目开发中,经常会遇到那种在服务一启动就需要自动执行一些业务代码的情况.比如将数据库中的配置信息或者数据字典之类的缓存到redis,或者在服务启动的时候将一些配置化 ...
- CSS实现表格细边框的三种方式
说到表格,虽说随着前端技术的发展div已经遍地开花彻底推翻了table布局的时代.可是当遇到报表之类的操作是table还是非常值得使用的. 由于操作表格的时候不可避免使用到细边框效果,所以我就整理了一 ...
- Java代码三种方式实现定时执行某个方法
如果你想定时的去执行某个方法,跟着这个操作测试一下,你就会了. 有3种定时方法可以做数据同步. 第一种: jdk提供的定时器工具Timer 1.单线程 2.可以指定延迟(开始执行的时间).周期时间 3 ...
- css中脱离标准流的三种方式,CSS的三种手段让元素脱离标准本文档流
1.浮动 浮动是CSS中用到的最多的一个选项,他有三个性质.关于浮动我们要强调一点,永远不是一个东西单独浮动,浮动都是一起浮动,要浮动,大家都浮动. 1.1 浮动元素脱离标准文档流 1.1.1 大概描 ...
- css中脱离标准流的三种方式,CSS——脱离标准流方法一:浮动
浮动是css里面布局用的最多的属性. 浮动语句: float:left; 左浮动 float:right; 右浮动 1.没有浮动的时候 2.两个盒子都左浮动 浮动的元素脱标,那么就能并排了,并且能 ...
- windows,ubuntu,代码三种方式制作Android开机动画 bootanimation.zip
一.bootanimation.zip结构 bootanimation.zip解压的目录结构,我的例子使用5张账片,总之是由(part文件夹+desc.txt) part文件夹里面存放图片,如下 de ...
最新文章
- SpringBoot配置文件放在jar外部
- 15、如何选择MySQL存储引擎
- 【maven插件】maven-help-plugin
- 中学生计算机编程教学视频6,计算机科学速成课6:寄存器和内存【视频】
- Css学习总结(2)——60个有用CSS代码片段
- as 运算符 与 where T : class
- html响应式布局平移,Canvas 随鼠标平移的响应式画布/魔法奇缘场景
- L325 如何睡觉
- DXF格式文件导入AD,做成可加工的PCB文件
- Intel 80286工作模式
- 复合类型(json)
- 什么是受限股票(RSU)、二级市场、蓝筹股
- 什么是SAP Analytics Cloud
- 中学物理数字化探究实验室建设配备
- IntelliJ IDEA初次创建简单的java项目--初学者使用详解
- vue自适应布局(各种浏览器,分辨率)
- 2023西安电子科技大学考研分析
- 图片转换为css_快速将色彩理论转换为CSS
- 华为nova4e能更新鸿蒙吗,华为nova4e禁止系统更新的方法_怎么关闭和禁用系统更新功能...
- matlab如何制作振型动画_Matlab 实时动画制作示例