之前有一篇文章《css块级元素垂直居中常用布局方式》主要介绍了绝对布局和flex布局,其实这两种布局也不是只局限在块级元素情形之中,需要做一些矫正。

1.flex我们一般用于有多个元素需要在横向或者纵向均匀分布,通过align-items和justify-content来控制这两个轴。

2.绝对定位常用于对单一元素相对父元素的位置布局,且位置比较灵活。

本篇在此基础之上又要做3点补充:

3.在页面多列、多行布局中,其实还经常会应用margin方式,而且会和css函数calc(100% - 100px);结合使用来定义页面中主要布局块的宽高。在设定了宽以后,就可以通过margin:0 auto;的方法,来让元素左右居中。

4.单行元素居中的布局,经常会用到text-align和vertical-align,需要注意的是,text-align是用在外层元素上,使内部的行内元素左右居中。而vertical-align是用在内部行内元素上,可以理解成使自己的中线和当前行的中线对齐。而且需要在外部元素上,使height等于line-height。

5.float在h5端似乎用的比较少,可以简单的让元素水平顶着父元素的边框。