页面布局是前端工程师的基本功之一,总结分析各种布局实现方法,可以让自己快速定位哪种方法实现功能,同时可以做到现最大程度的兼容。
一、水平居中
假设:最基本机构 .parent>.child
1、行内元素、文本元素、行内块元素
.parent{ text-align: center; }
说明:只对行内元素有效;属性会继承影响到后代行内元素;
2、单个块级元素
#child{ 200px; /*必须定宽*/ margin: 0 auto; }
说明:child必须定宽,并且值不能为auto;宽度要小于父元素,否则无效.
3、多个块级元素
.parent{ text-align: center; } .child{ display: inline-block; }
说明:只对行内内容有效;属性会继承影响到后代行内内容;
4、定位+transform/定位+margin
#parent{ height: 200px; 200px; position: relative; } #son{ position: absolute; left: 50%; transform: translateX(-50%);
/*margin-left: -50px;*/ 100px; height: 100px; }
说明: 主要是transform兼容性不好,需要加上各种浏览器内核前缀;
5、flex布局
.parent{ display: flex; justify-content: center; }
说明:flex兼容性问题,比较合适用于移动端开发。
二、垂直居中
假设:最基本机构 .parent>.child
1、行内元素、文本元素、行内块元素
.parent{ height: 100px; line-height: 100px; }
说明:比较试用单行的内容
2、多行文本
.parent{ height: 100px; line-height: 50px; }
3、table-cell(单个块级元素)
.parent{ display: table-cell; vertical-align: middle; }
4、定位+transform/定位+margin
和上面水平定位差不多,只是换了一个轴;
5、flex布局
parent{ display: flex; align-items: center; } 或 .parent{ display: flex; } .child{ align-self: center; }
说明:还是兼容性的缺点
三、水平垂直居中
<div class='parent'> <div class=''child></div> </div>
1、定位
.parent{ position:relative; } .child{ position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; }
2、定位+transform
.parent{ position:relative; } .child{ position:absolute; top:50%; right:50%; transform:translate(-50%,-50%); }
3、text-align+height +line-height
.parent{
text-align:center; height: 100px; } .child{ line-height: 100px; }
4、table-cell
.parent{ display: table-cell; vertical-align: middle; } .child{ margin:auto; }
四、单独讲讲flex布局
其实flex布局已经不是什么新鲜的事物了,早在2009年,W3C就提出了一种新方案,但是由于各种浏览器兼容性的问题,这种方案一直没有推广开来。记得很在早前就有使用过一个叫swiper的移动端插件,看了其中的源代码,发现它里面就使用了flex布局,草草看了一下,也知道大概意思,但是之后的项目一直没有机会使用,我也就没有再关注过。前端时间去看看这种方案的兼容性,95%以上已经完美支持这种解决方案了。so。。。可以大胆的使用了。(有点坑的就是,IE10以下不支持,ios没问题,手机安卓4.3以下也不支持)
flex布局也叫弹性布局,相比传统的布局以及bootstrap的栅格布局,flex布局显得更加的灵活,代码写起来也更加的优雅。
任何一个容器都可以通过设置 display 为 flex/inline-flex 将其指定为Flex布局。对于设置了Flex布局的容器,子元素的 float、clear、vertical-align 属性将失效;但是,如果对这些子元素设置 position 定位,那么Flex属性的作用会失效。即按权重来说:position > flex > flot/clear/vertival-align;
直接插入主题,怎么使用flex使元素居中?
首先先明确基本概念:任何的容器都可以指定flex布局,容器里面的子元素自动成为容器的成员,也叫项目,flex item
.parent{ display: flex; display: -webkit-flex; justify-content:center; align-items:center; }
简单几行,就可以使子元素完全居中于父元素中了。。。
接下来,再看看flex布局的其他使用情况。
我们可以把弹性布局想成一个可以朝四个方向拉伸的盒子。
容器元素有六个属性,分别是:
flex-direction
决定项目元素的排列方向,一般有四个值
row(默认值,主轴为水平方向,起点是左端,其他见名知意) | row-reverse | column | column-reverse;
flex-wrap
决定项目元素都在一条线上,一般有三个取值
nowrap(默认值,不换行) | wrap | wrap-reverse;
flex-flow
flex-direction
属性和flex-wrap
属性的简写形式,默认值为row nowrap
。
justify-content
定义了项目在主轴上的对齐方式。
flex-start (默认值):左对齐| flex-end | center | space-between | space-around;
align-items
定义项目在交叉轴上如何对齐。
align-content
定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
拿来看个例子吧,如果ui给你这样的的设计稿,你怎么出来?
这样怎么排版?用什么办法?定位???其实我们可以尝试用flex的解决方案。看看效果,这么没有百分之百去还原,做了大概。
实现思路,给父元素加上下面的属性(已经最大程度考虑了浏览器的兼容性),然后给元素加上margin值就能达到上面的效果了。
.flex{ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } /*居中对齐*/ .flex-justify-center{ -webkit-box-pack:center; -moz-justify-content:center; -webkit-justify-content:center; justify-content: center; } /*上下居中*/ .flex-align{ -webkit-box-align:center; -moz-align-items:center; -webkit-align-items:center; align-items:center; }
五、经典布局--两列布局
需求:左边宽度固定,右边宽度自适应
1、flex
<style> body{ display: flex; } .left{ background-color: rebeccapurple; height: 200px;
width:100px; } .right{ background-color: red; height: 200px; flex:1; } </style> <body> <div class="left"></div> <div class="right"></div> </body>
2、float+margin
<style> div { height: 200px; } .left { float: left; 100px; background-color: rebeccapurple; } .right { margin-left: 100px;
//直接用overflow:hidden触发BFC模式 background-color: red; } </style> <body> <div class="left"></div> <div class="right"></div> </body>
3、table
<style> .parent{ 100%; display: table; height: 500px; } .left,.right{ display:table-cell; } .left { 100px; background-color: rebeccapurple; } .right { background-color: red; } </style> <body> <div class="parent"> <div class="left"></div> <div class="right"></div> </div> </body>
说明:利用单元格自动分配宽度
4、利用绝对定位
.parent{ position: relative; /*子绝父相*/ } .left { position: absolute; top: 0; left: 0; 100px; height: 500px; } .right { position: absolute; top: 0; left: 100px; right: 0; height: 500px; }
5、float+overflow
.left { background-color: #f00; float: left; 100px; height: 500px; } .right { background-color: #0f0; height: 500px; overflow: hidden; } <div id="left">左列定宽</div> <div id="right">右列自适应</div>
6、Grid栅格布局
.parent { 100%; height: 500px; display: grid; //声明 grid-template-columns: 100px auto; } .left { background-color: red; } .right { background-color: green; }
说明:支持还不太好
MDN: CSS Grid Layout
六、总结
对于这类的学习,平时用到的时候,再去查对应的属性应用就可以了,更重要的是在学习一项新的东西之后,慢慢加入自己的体会,没在实践中去总结。
建议如果需求不太考虑低版本的兼容问题,可以大胆的使用flex和grid等方法,真的好用~。