CSS 布局检测

← 返回首页

CSS1 基础布局 1996

display (block/inline/none)
float 浮动
clear 清除浮动
position (static/relative/absolute)
z-index 层叠顺序

CSS2 布局扩展 1998

position: fixed 固定定位
display: table 系列布局
vertical-align 垂直对齐
visibility 可见性
overflow 溢出处理
clip 裁剪 (已废弃)

CSS3 Flexbox 弹性布局 2009-2017

display: flex
flex-direction
flex-wrap
justify-content
align-items
flex-grow
flex-shrink
flex-basis
order 排序

CSS3 Multi-column 多列布局 2011

column-count 列数
column-gap 列间距
column-rule 列边框
column-span 跨列
break-inside 避免分页

CSS Grid 网格布局 2017

display: grid
grid-template-columns/rows
grid-template-areas
grid-gap (已更名为 gap)
grid-auto-columns/rows
grid-auto-flow
grid-area
minmax() 函数
repeat() 函数

现代布局特性 2019+

gap (Flexbox/Grid 通用)
aspect-ratio 宽高比
Container Queries 容器查询
inset 简写属性
逻辑属性 (margin-block 等)
place-content 简写
place-items 简写
place-self 简写