bootstrap 垂直居中 布局_给你一份详细的CSS布局指南,请查收
作者:catboy
文章来源:http://t.cn/A6wtKzip
在我们前端开发过程中,写css
(包括sass, less, stylus
这样的预处理器)进行设计稿的样式还原是一项重要的工作,而其中,关于页面布局的部分,又是书写样式代码时候的重点和难点
这篇文章就尽可能的去总结常见的一些页面布局实现方案(并不是全部,布局实现方法太多了
),希望能够对大家有所帮助。
在开始正题之前,有一点要说明:css布局中遇到的一个绕不开的问题就是浏览器兼容性,下面方案会遇到类似transform, flex等的兼容性问题
且由于grid布局兼容性问题,暂不涉及grid布局内容,在不同场景,大家选择合适的布局实现方案即可。
1. 居中相关的布
1.1 水平居中布局
效果图如下:
方案一. inline-block + text-align
分析:display
设置为inline-block
的元素,具有文本元素的性质,其父元素可以通过设置文本对齐属性text-align
来控制其在行内的对齐方式,text-align: center
即为水平对齐
注意:text-align
属性是具有继承性的,会导致自己元素内部的文本也是居中显示的,需要自身设置text-align
覆盖
方案二. 定位 + transform
分析:父元素开启定位(relative,absolute,fixed都可以)后,子元素设置绝对定位absolute
后,left
设置为50%
,再使用transform:
translat
eX
(-50%)
将子元素往反方向移动自身宽度的50%
,便完成水平居中。
注意:父级元素是否脱离文档流,不影响子元素水平居中效果,但是transform
是css3
属性,存在浏览器兼容问题
方案三. display: block
+ margin: 0 auto
分析:这个方法只需要对子元素进行设置就可以实现水平居中,margin设置auto表示浏览器会自动分配,实现来外边距等分效果。
注意:这里子元素设置display
为block
或者table
都是可以的,如果子元素脱离文档流(浮动,定位),会导致margin属性的值无效。
1.2 垂直居中布局
效果图如下:
方案一. 定位 + transform
这种方案和之前水平居中布局的方案二是同样的原理,不在赘述
方案二. display: table-cell
+ vertical-align
分析:设置display: table-cell
的元素具有td
元素的行为,它的子元素布局方式类似文本元素,可以在父元素使用vertical-align: middle;
实现子元素的垂直居中。
注意:vertical-align
属性具有继承性,导致父元素内文本也是垂直居中显示的。
1.3 水平垂直居中布局
效果图如下:
前面分别总结了一些水平居中和垂直居中的布局方式,那么进行水平垂直居中的布局,也就没什么特别要说的了,直接上代码:
方案一.定位 + transform
方案二. 结合水平布局方案三,垂直布局方案二
1.4 使用flex
进行居中布局
分析:使用flex
,水平垂直居中会变得非常容易,默认情况下,align-items: center
垂直居中(交叉轴排列方式),justify-content: center
水平居中(主轴排列方式) 注意:需要考虑浏览器兼容性问题。
2. N列布局
2.1 两列布局
这里的两列布局指的是,其中一列是定宽元素,另一列元素宽度自适应。比如,我们实现做列定宽,右列自适应的布局。
效果图如下:
方案一. 左边元素浮动,定宽,右边元素设置margin-left
分析:一个最简单的做法,左边元素设置浮动,定宽,右边元素的margin-left设置为左边元素宽度大小,可以实现效果。
注意:我们左边元素使用了浮动,但是右边元素没有浮动
方案二. 左边元素浮动,定宽,右边元素设置overflow:hidden
分析:右边元素由于设置overflow:hidden
开启BFC
,与外界隔离,所以能实现效果
注意:overflow:hidden
的设置也使得右边元素内容超出隐藏。这里如果不设置overflow:hidden
,右边元素的宽度是100%,有一部分被左边浮动元素盖住,不是我们要的结果,虽然看起来没什么区别。
方案三.将左右元素用一个display:table
的元素包裹,左右元素设置为d
isplay: table-cell
分析:这里主要是基于表格元素,在没有设置宽度时,会自动分配宽度来实现布局的。
注意:设置为表格后,在某些浏览器可能会受到表格本身特有行为的影响,比如表格边框等等。
方案四. flex布局
分析:父容器采用flex布局,左边元素定宽之后,右边元素,因为只有一个,所以flex属性设置为不是0的正值(也就是设置flex-grow),都会占满剩余空间。
注意:依然是,注意兼容性问题。
2.2 三列布局
这里的三列布局,主要分三种情况介绍,第一种是普通三列布局,还有两种是比较有名的圣杯布局和双飞翼布局(两者都是实现一个两侧宽度固定,中间宽度自适应的三列布局,区别在于双飞翼布局比起圣杯布局,中间元素会多一个子元素,而左右元素需要定位relative
)
2.2.1. 普通三列布局
我们这里实现的是,左中两列定宽,右边一列自适应的布局,这个实际上和前面的两列布局是类似的。
效果图如下:
方案一. 定宽 + overflow:hidden
分析:这个方案和两列布局方案二是相同的。
方案二. flex布局
分析:这里布局原理和两列布局中flex布局方式是相同的。
2.2.2. 圣杯布局
两侧宽度固定,中间宽度自适应的三列布局(中间元素不需要嵌套子元素)
效果图如下:
方案一. 左右两侧浮动,中间元素使用margin
分析:这种方法就是左右两边浮动,给定宽度,中间元素使用margin
空出左右两边元素的位置,实现比较简单。
注意:这种方式,需要在书写html
结构时,将右侧元素写在中间元素的前面,因为如果右侧元素在中间元素后面,由于浮动元素位置上不能高于(或平级)前面的非浮动元素,导致右侧元素会下沉。但是,中间元素一般都是页面的核心部分,放在比较后面的位置,不利于SEO
。
方案二. 父容器使用margin,左中右元素均浮动,利用定位和margin移动到正确位置
分析:这种方法将中间元素c放置在最前面,有利于SEO。
注意:实现细节在参考下面代码中的注释。
2.2.3. 双飞翼布局
两侧宽度固定,中间宽度自适应的三列布局(中间元素内部增加子元素用于放置内容)
效果图如下:
方案一. 中间元素子元素设置margin,左中右元素均设置浮动,左右元素通过margin移动到正确位置
分析:这种方法为中间元素增加子元素作为内容区域,通过子元素设置margin完成。
注意:和圣杯布局对照,有相似处,也有不同,实现的结果是一样的。
2.2.4. flex布局实现(中间自适应,左右等宽)
分析: flex实现就很简单了,可以参照普通三列布局flex实现。
注意:还是要注意浏览器兼容性问题。
2.3 多列等分布局
所谓多列等分布局,就是若干列在容器中自适应等分宽度,我们以五列等分布局为例。
效果图如下:
方案一. 浮动 + 百分数平分
分析:这种方案就是每一列浮动,之后按照百分比平分宽度,实现简单。
方案二. 使用display: table
布局
分析:父容器指定display: table
,设置布局行为table-layout:
fixed
,指定每个表格等宽。
注意: table-layout: fixed
是需要设置的,默认情况下,列宽度由单元格内容设定,设置之后,列宽由表格宽度和列宽度设定。
方案三. 使用column布局
分析:使用column布局,指定内容区域需要分为5列即可。
注意:浏览器兼容性问题。
方案四. 使用flex布局
分析:使用flex布局十分简单,指定每一列所占空间相同即可
2.4 多列等高布局
所谓多列等高布局,就是多类内容可能不一样,但是保证每一列的高度是相同的,这个高度应该由内容最多的那一列决定。
效果图如下:
方案一. 使用display: table布局
分析:父元素设置display: table,子元素设置display: table-cell,这样布局就是按照表格行为布局,表格单元格默认等高。
方案二. 使用flex布局
分析:默认情况下,display: flex的元素align-items属性值为stretch,如果项目未设置高度或设为auto,将占满整个容器的高度。
3. 全屏布局
所谓全屏布局,就是实现经典的头部,内容区,底部三大区域占满全屏的布局,这种布局很常见。
实现效果如下:
分析:这里采用的方案是,头部底部使用fixed定位,中间使用之前讲到的两列布局技术。
注意:头部底部可以使用header, footer标签,内容区域结构与布局都是多种多样的。
本篇文章总结了一些常见布局的实现方案,css布局的实现方案很多,需要我们平时多去积累,选择合适的方案。
最后,希望随着时间的推移,兼容性不再成为我们技术实现的障碍,愿世界越来越美好。
慕课网大前端训练营火爆开班!
24周系统化课程
110+必备知识点,15种效率工具
1套业务系统,实现多端应用场景
直击面试难点、痛点、盲点,详解求职技巧
名额有限,赶快扫码报名吧!↓↓↓
添加彤彤小姐姐微信限时领取200元优惠码,2280即可入手仅有3个名额,不要错过呦~
bootstrap 垂直居中 布局_给你一份详细的CSS布局指南,请查收相关推荐
- 荒野行动计算机高考题,叮咚,这里有一份荒野行动强迫症测试试卷请查收~
原标题:叮咚,这里有一份荒野行动强迫症测试试卷请查收~ 各位荒友,会不会听歌一定要调成整数音量~会不会手机app一定要分颜色整理~会不会东西一定要摆整齐?小编就会这样,一个生活中的"强迫症患 ...
- div固定在浏览器顶部_手写几种常见的css布局,1垂直两栏左边固定右边自适应,垂直3栏左右固定中间自适应...
1垂直两栏右边固定左边自适应的四种写法 <!DOCTYPE html> <html lang="en"><head><meta chars ...
- css中如何实现帧布局_浅谈web前端中的表格布局与CSS盒子布局
在web前端设计排版时我们可能会用到表格布局和div+CSS布局,但现在主要使用后者,为何?今天我们来谈一谈两者之间的发展和原理. 话不多说下面来干货 发展过程 上个世纪Web开发人员流行使用表格进行 ...
- sql 替换字符串函数_你有一份Excel文本函数大全,请注意查收(下)
点击关注上方"SQL数据库开发", 设为"置顶或星标",第一时间送达干货 之前给大家分享了Excel文本函数的上中两部分,没有看的小伙伴可以戳这里: 你有一份E ...
- 重构html布局,网站重构|网页重构|浏览器兼容|div+css布局|psd转html|概念网络
什么是网站重构 网页重构就是把"没有采用Div+CSS布局的网站,大量使用HTML进行定位.布局,或者虽然已经采用Div+CSS,但是未遵循HTML结构化标准的站点"变成" ...
- 流体式布局与响应式布局_将固定像素设计转换为流体比例布局
流体式布局与响应式布局 Responsive web design has been a prime necessity for every enterprise ever since Google ...
- java 界面线性布局_怎么用java代码写一个线性布局;布局里面有两个按钮是水平的...
展开全部 android 使两个按钮水平排列的方法是使用lineLayout线性布局,如下e69da5e6ba9062616964757a686964616f31333337623433代码:< ...
- 堆积柱形图显示总数_送你一份堆积柱形图小点心,请收下~
今日份小技巧 小悦今天要给大家分享一个很简单,又常常用到还特别实用的小功能,那就是我们如何快速在堆积柱形图中将总值显示到堆积图上面?接下来我们在这篇文章中,跟你分享一种使用组合图表的快速简便方法,来实 ...
- 关系查询处理 查询优化 论文_叮!你有一份留学论文攻略,请查收~
提到留学生活,最令留学党们印象深刻且抱怨最多的,恐怕就是各种大大小小论文吧! 国内学生写论文都经常怨声连连,更何况是要用非母语写作的海外留学生呢?再加上海外论文的考察方式很严谨,从格式.语言到主旨内容 ...
最新文章
- 如何写出漂亮的代码:七个法则
- python代码画图案-python如何绘制iPhone手机图案?(代码示例)
- python教程怎么抓起数据_介绍python 数据抓取三种方法
- python 读取鼠标选中文本_木辛老师的编程课堂:Python和Qt之页面布局实战篇(一)...
- RAC(ReactiveCocoa)使用方法(二)
- 如何注释python中html,Python在HTML中提取带注释的代码,python,html,被
- GTK+ 3.5.18 发布,GUI 开发工具包
- asp.net 域名注册查询接口 支持批量后缀查询
- α波、β波、θ波和δ波
- 主动学习与自监督学习结合的方法(Active Learning+Self-Supervision)
- 求指点如何使用dynami类型的变量
- ChatGPT 帮你写情人节文案
- java 奶牛生子,奶牛镇的小时光npc怎么结婚?结婚生子攻略
- ACL 2021 Question Answering
- 涉密计算机等级如何确定,涉密信息系统的等级由()确定。
- C++实现多线程及其三种方法实现多线程同步
- 普通文本el-tootip超出宽度自动显示省略号,悬停显示
- (二)提升树模型:Xgboost原理与实践
- Android APP安全之APK完整性校验
- 鸿蒙要出来了,安卓开发工程师有影响吗?