除了display: flex;还有什么布局?
时间: 2024-01-04 16:20:07 浏览: 37
除了display: flex;,还有以下几种常见的布局方式:
1. display: block;
- 这是默认的布局方式,元素会以块级元素的形式显示,每个元素会独占一行。
- 例子:
```css
.demo {
display: block;
}
```
2. display: inline;
- 元素会以行内元的形式显示,不会独占一行,可以与其他行内元素在同一行显示。
- 例子:
```css
.demo {
display: inline;
}
```
3. display: inline-block;
- 元素会以行内块级元素的形式显示,不会独占一行,可以与其他行内元素在同一行显示,并且可以设置宽度、高度等属性。
- 例子:
```css
.demo {
display: inline-block;
}
```
4. display: grid;
- 使用网格布局,将元素划分为行和列,可以更灵活地控制元素的位置和大小。
- 例子:
```css
.demo {
display: grid;
}
```
5. display: table;
- 将元素显示为表格,可以使用表格的布局方式进行排列。
- 例子:
```css
.demo {
display: table;
}
```
6. display: none;
- 元素不会显示,完全隐藏。
- 例子:
```css
.demo {
display: none;
}
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)