基础——重中之重之CSS中的布局

说起CSS的布局,大家肯定是接触的非常多的,我们写页面时无时无刻都伴随着的布局,好的布局带来的是简洁的代码,良好的性能与兼容性,更是在页面重构
时省下很多功夫, 下面开门见山,直接看CSS中经典布局与实现吧.
如果您有更好的方案或有静电布局实现的分享, 欢迎在评论区留言, 我会加以改正并附属上您的大名(源码请自行F12控制台查看)

水平居中

关于margin: 0 auto; 会可以居中的原理可以查看 地址

block元素居中

inline-block元素居中

inline元素居中

一个古老的居中方式(不推荐)

定宽绝对定位的元素 +margin

绝对定位的元素 +transform

flex式

垂直居中

absolute且高度固定 的元素

table-cell(注意此时父级元素高度必须是明确的, 不能是百分比的)

单行文字用行高来居中(适合场景导航栏)

这种方法自己的宽度不能超过父级, (我也不知道为啥)

by transform

by flex

关于垂直水平居中可以通过上面列举的方式根据情况组合出来, 这里就不啰嗦了, 否则就是一个笛卡尔积式的blog, 只说一个简单的flex方式

by flex2

各种各样的自适应

边距固定,宽高自适应

左固定, 右自适应 by float

左固定, 右自适应 by flex

三列布局 左右固定, 中间适应 by float

三列布局 左右固定, 中间适应 by flex

等分布局

table-cell

flex 没有写兼容代码, 你可以通过工具是生成兼容性的CSS
暂时想到了这么多, 有建议欢迎留言
The end