52 lines
1.6 KiB
Markdown
52 lines
1.6 KiB
Markdown
|
|
|||
|
|
## 前言
|
|||
|
|
|
|||
|
|
### CSS 布局的演化
|
|||
|
|
|
|||
|
|
- 早期以table为主
|
|||
|
|
|
|||
|
|
- 后来一技巧性布局为主（这些技巧原本并不是用于布局的）
|
|||
|
|
|
|||
|
|
- flexbox/grid
|
|||
|
|
|
|||
|
|
- 响应式布局
|
|||
|
|
|
|||
|
|
### 常见的布局方法
|
|||
|
|
|
|||
|
|
1、**table 表格布局**：早期使用的布局，如今用得很少。
|
|||
|
|
|
|||
|
|
2、**float 浮动 + margin**：问题较多。
|
|||
|
|
|
|||
|
|
3、**inline-block 布局**：问题较多。
|
|||
|
|
|
|||
|
|
对外的表现是行内元素（不会独占一行），对内的表现是块级元素（可以设置宽高）。
|
|||
|
|
|
|||
|
|
4、**flex 布局**：为布局而生，非常灵活，是最为推荐的布局写法。唯一的缺点是兼容性问题：
|
|||
|
|
|
|||
|
|
20191005_1200.png
|
|||
|
|
|
|||
|
|
上图中可以看到， flex 布局不支持 IE9 及以下的版本。如果你的页面不需要处理 IE浏览器的兼容性问题，则可以放心大胆地使用 flex 布局。
|
|||
|
|
|
|||
|
|
### 常见的布局属性
|
|||
|
|
|
|||
|
|
（1）`display` 确定元素的显示类型：
|
|||
|
|
|
|||
|
|
- block：块级元素。
|
|||
|
|
|
|||
|
|
- inline：行内元素。
|
|||
|
|
|
|||
|
|
- inline-block：对外的表现是行内元素（不会独占一行），对内的表现是块级元素（可以设置宽高）。
|
|||
|
|
|
|||
|
|
（2）`positon` 确定元素的位置：
|
|||
|
|
|
|||
|
|
- static：默认属性值。
|
|||
|
|
|
|||
|
|
- relative：相对定位。相对于元素本身进行偏移，**不会改变它所占据的空间**。
|
|||
|
|
|
|||
|
|
- absolute：绝对定位。相对于父元素中最近的 relative/absolute 进行偏移，会脱离文档流。音标：[ˈæbsəluːt]。
|
|||
|
|
|
|||
|
|
- fixed：固定定位。相对于可视区域固定，会脱离文档流。
|
|||
|
|
|
|||
|
|
`relative`、`absolute`、`fixed`这三个属性，可以结合 z-index 来设置层级。
|
|||
|
|
|