欢迎相互交流学习
文章目录
前言
1. 居中相关的布局
1.1 水平居中布局
方案一. inline-block + text-align
方案二. 定位 + transform
方案三. display: block + margin: 0 auto
1.2 垂直居中布局
方案一. 定位 + transform
方案二. display: table-cell + vertical-align
1.3 水平垂直居中布局
方案一.定位 + transform
方案二. 结合水平布局方案三，垂直布局方案二
方案三 使用绝对定位盒子的特性
1.4 使用flex进行居中布局
2. N列布局
2.1 两列布局
方案一. 左边元素浮动，定宽，右边元素设置margin-left
方案二. 左边元素浮动，定宽，右边元素设置overflow:hidden
方案三.将左右元素用一个display:table的元素包裹，左右元素设置为display: table-cell
方案四. flex布局
2.2 三列布局
2.2.1. 普通三列布局
方案一. 定宽 + overflow:hidden
方案二. flex布局
2.2.2. 圣杯布局
方案一. 左右两侧浮动，中间元素使用margin
方案二. 父容器使用margin，左中右元素均浮动，利用定位和margin移动到正确位置
2.2.3. 双飞翼布局
2.3 多列等分布局
方案一. 浮动 + 百分数平分
方案二. 使用display: table布局
方案三. 使用column布局
方案四. 使用flex布局
2.4 多列等高布局
方案一. 使用display: table布局
3. 全屏布局
后记
文章目录
前言
1. 居中相关的布局
1.1 水平居中布局
方案一. inline
