css中几种最优布局

一、水平居中（使用text-align+inline-block）

代码：

运行结果：

二、垂直居中（使用table-cell+vertical-align）

代码：

运行效果：

三、水平垂直居中（使用text-align+inline-block+table-cell+vetical-align）

代码：

运行效果：

四、多列布局

（1）定宽+自适应（使用float+margin）

left


right
right

运行结果：

（2）两列定宽+一列自适应（使用float+overflow）

left
center
right
right

运行结果：

(3) 不定宽+自适应（使用float+overflow）

代码：

left

right
right

运行结果：

 

 

 

（4）两列不定宽+一列自适应（使用float+overflow）

代码：

left
center

right
right

运行结果：

（5）等分布局（使用float）

代码：

part1
part2
part3
part4

运行结果：

（6）定宽+自适应+两块高度一样高

 代码：

left
right
right

运行结果：

 

 

 

5.全局布局（使用position）

代码：

top
left
right
bottom

运行结果：

 

 

 

 

 

 

 

 

 

 

 

 

 

 

全屏布局的特点：

• 滚动条不是全局滚动条，而是出现在内容区域里，往往是主内容区域
• 浏览器变大时，撑满窗口

全屏布局的方法：

 

 

 

 

 

 

 

 

 

 

 

 

全局布局兼容性，自适应，性能一览表：

方案	兼容性	性能	是否自适应
position	好	好	部分自适应
flex	较差	差	可自适应
Grid	差	较好	可自适应