阅读 290

CSS常用布局类型

之前有一篇文章《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端似乎用的比较少,可以简单的让元素水平顶着父元素的边框。



文章分类
后端
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐