1、绝对定位+margin:auto
<style type="text/css">
.wrp { background-color: #b9b9b9 width: 240px height: 160px }
.box { color: white background-color: #3e8e41 width: 200px height: 120px overflow: auto }
.wrp1 { position: relative}
.box1 { margin: auto position: absolute left: 0right: 0top: 0bottom: 0 }</style><div class="wrp wrp1">
<div class="box box1">
<h3>完全居中层1:</h3>
<h3>开发工具 【 WeX5 】: 高性能轻架构、开源免费、跨端、可视化</h3>
</div></div>1234567891011121314151617181920212223242526
效果:
实现原理:利用css定位规则,设置左右、上下方向定位为0,margin为auto,让css根据定位计算margin值,用hack的方式实现居中。居中块(绿色)的尺寸需要可控,因为css计算margin时也需要参考尺寸值,由于四周为0,所以自动计算的尺寸是与父容器一样的。无论是设置width、height或者是 max-height、max-width,都是让尺寸不会扩大到与父级一样。
2、绝对定位+margin反向偏移
</style><style type="text/css">
.wrp2 { position: relative}
.box2 { position: absolute top: 50%left: 50% margin-left: -100px/* (width + padding)/2 */
margin-top: -75px/* (height + padding)/2 */
}</style><div class="wrp wrp2">
<div class="box box2">
<h3>完全居中方案二:</h3>
<h3>开发工具 【 WeX5 】: 高性能轻架构、开源免费、跨端、可视化</h3>
</div></div>12345678910111213141516
效果:
实现原理:由于top、left偏移了父对象的50%高度宽度,所以需要利用margin反向偏移居中块的50%宽高。而margin中不能使用百分比,因为百分比是针对父对象的,所以需要手动计算定值指定margin值。这个方案需要固定尺寸值,以此来计算margin反向偏向值,所以方案2比方案1稍差!
3、绝对定位+transform反向偏移
<style type="text/css">
.wrp3 { position: relative}
.box3 { margin: auto position: absolute top: 50%left: 50% -webkit-transform: translate(-50%, -50%) -ms-transform: translate(-50%, -50%) transform: translate(-50%, -50%) }</style><div class="wrp wrp3">
<div class="box box3">
<h3>完全居中方案三:</h3>
<h3>开发工具 【 WeX5 】: 高性能轻架构、开源免费、跨端、可视化</h3></div>12345678910111213141516
效果:
实现原理:方案3与方案2原理一样!不同点是使用了transform来代替margin做反向偏移,由于transform的计算基准是元素本身,所以这里可以用50%来做反向偏移。这个方案也需要固定尺寸值,浏览器以此为基准来计算定位!
4、display:tabel
<style type="text/css">
.wrp4 { display: table}
.subwrp4 { display: table-cell vertical-align: middle }
.box4 { margin: auto overflow-wrap: break-word height: auto max-height: 80% max-width: 80% }</style><div class="wrp wrp4">
<div class="subwrp4">
<div class="box box4">
<h3>完全居中方案四:</h3>
</div>
</div></div>123456789101112131415161718192021
效果:
实现原理:方案4是实现效果比较好的,居中块的尺寸可以做包裹性,缺点是增加了一层table-cell层来实现垂直居中。方案4的居中块可以设置 max-height、max-width,而且居中块是可以具有垂直方向的包裹性的。水平方向由于是在table-cell里面的,所以会直接显示max-width,也就是宽度趋大。
5、display: inline-block
<style type="text/css">
.wrp5 { text-align: center overflow: auto }
.box5 { display: inline-block vertical-align: middle width: auto height: auto max-width: 90% max-height: 90% }
.wrp5:after { content: '' display: inline-block vertical-align: middle height: 100% margin-left: -0.25em /* To offset spacing. May vary by font */
}</style><div class="wrp wrp5">
<div class="box box5">
<h3>完全居中方案五:</h3>
<h3>开发工具 【 WeX5 】: 高性能轻架构、开源免费、跨端、可视化</h3>
</div></div>12345678910111213141516171819202122232425262728
效果:
实现原理:原理:利用inline-block的vertical-align: middle去对齐after伪元素,after伪元素的高度与父对象一样,就实现了高度方向的对齐。方案5实现效果更加好,居中块的尺寸可以做包裹性、自适应内容,兼容性也相当好。缺点是水平居中需要考虑inline-block间隔中的留白(代码换行符遗留问题。)。方案4的居中块可以设置 max-height、max-width,而且居中块是可以具有水平垂直两个方向的自适应。
6、display: flex-box
<style type="text/css">
.wrp6 { display: -webkit-flex display: -moz-box display: -ms-flexbox display: -webkit-box display: flex -webkit-box-align: center -moz-box-align: center -ms-flex-align: center -webkit-align-items: center align-items: center -webkit-box-pack: center -moz-box-pack: center -ms-flex-pack: center -webkit-justify-content: center justify-content: center }
.box6 { width: auto height: auto max-width: 90% max-height: 90% }</style><div class="wrp wrp6">
<div class="box box6">
<h3>完全居中方案六:</h3>
<h3>开发工具 【 WeX5 】: 高性能轻架构、开源免费、跨端、可视化</h3>
</div></div>1234567891011121314151617181920212223242526272829303132
效果:
实现原理: flexbox布局。此乃布局终极大法,专治各种布局定位难题!优点:能解决各种排列布局问题,实现方式符合人类认知。缺点:PC端某些旧浏览器支持度不高。
CSS是前端基础技能之一,而CSS最重要的功能就是网站布局。CSS布局方式有很多,从远古时代的table(表格)布局-->float(浮动)布局-->position(定位)布局-->flex(弹性)布局-->grid(网格)布局(还未正式推出),下面咱们简单谈一谈各种布局的用法及其优缺点。
table布局就是将网站当做一个表单来做,这里不做展开,因为现在基本不这么用了。
float:浮动。float刚开始并不是为了用来网页布局,而是用来解决图文信息中图片与文本冲突的问题的。
如下图:
这种常见的图文效果,没有float之前是很难达到的。有了float之后只需要加一个float:left,轻松搞定。
‘咦,如果float可以处理图文的问题,那用来布局不也可以吗?’,后来有人用float试着用于网页布局,还真的可以。
网页中最常见的布局如下:
用float做
比table布局要方便不少,不过float随之而来的带来了 “浮动高度塌陷”的问题:
如果浮动元素的父元素没有设定高度,当其子元素浮动后,父元素就因为内部没有子元素撑起从而高度变为0;
引申:网页元素一般分为 普通流,浮动流,定位流。其中普通流和浮动流在一个层级上,定位流>浮动流>普通流。
之后为了解决这个问题搞出来一系列清除“浮动高度塌陷”的策略方法,非常麻烦。
position:定位;顾名思义,就是确定位置。position同样可以用做网页布局。
同样的效果
不过position需要计算每一个元素的位置,而且这个位置是定死的,略显繁琐和笨重。实际上position我平常只用来定位一些小的标签之类的东西。position优点在于不像float那样会影响其他元素。
关键点:子绝父相。需要定位的元素用absolute绝对定位,其父元素用 relative相对定位。还有fixed固定定位,他是以html为父元素的定位。
flex:弹性;弹性布局很好的解决了float和position的问题,非常好用。
使用方法:
在父元素使用 display:flex确定弹性作用的范围。
然后
justify-content:center(space-around,space-between等);水平方向布局;
align-items:center(flex-start,flex-end等)垂直方向布局;
不过flex不兼容IE8及以下的浏览器。
大部分情况下flex布局已经能满足需要,不过flex只能用作一维布局,也就是说,flex一次只能作用于一条线。如果想要进行二维布局,必须翻转坐标二次弹性,这样会显得不够优雅,这时候grid(网格)布局就发展起来了。
grid布局用法和flex相似,但是作用于二维布局。
先在父元素使用 display:grid确定网格作用范围;
然后
grid-template-columns: 40px 50px auto 50px 40px(行)
grid-template-rows: 25% 100px auto(列)
等等属性,这里只简单介绍,大家了解有这个东西就行。
在现实工作用,以flex为主,position辅助已经足够应对所有问题。
1、一列布局:一般都是固定的宽高,设置margin : 0 auto来水平居中,用于界面显著标题的展示等。
2、两列布局:说起两列布局,最常见的就是使用float来实现。float浮动布局的缺点是浮动后会造成文本环绕等效果,以及需要及时清除浮动。
3、三列布局:两侧定宽中间自适应,首先设置父级元素的宽度,可以左左右设置浮动。然后中间设置margin调整间距。 也可以都设置成左浮动,设置margin,调整间距。同样注意清除浮动的影响。
4、混合布局:在一列布局的基础上,保留top和foot部分,将中间的main部分改造成两列或三列布局,小的模块可以再逐级同理划分。