HTML常见标签的默认display属性归类
时间: 2023-12-13 07:31:37 浏览: 41
HTML常见标签的默认display属性可以归为以下几类:
1. 块级元素 (display: block) - 通常以新行开始,占据父元素的整个宽度,高度由内容决定,可以设置宽高、内边距和外边距等属性。常见的块级元素有 div、p、h1~h6、ul、ol、li、header、footer、nav 等。
2. 行内元素 (display: inline) - 不会以新行开始,只占据内容所需的宽度,高度由字体大小决定,不可以设置宽高、内边距和外边距等属性。常见的行内元素有 span、a、img、input、label、button、select、textarea 等。
3. 内联块元素 (display: inline-block) - 不会以新行开始,占据内容所需的宽度,可以设置宽高、内边距和外边距等属性,常用于将多个行内元素作为一个整体来布局。常见的内联块元素有 input、img、button、select 等。
4. table相关元素 (display: table, table-row, table-cell) - 用于创建表格,其内部元素会根据表格布局进行排列,与常规的块级元素或行内元素不同。常见的 table 相关元素有 table、tr、td、th、thead、tfoot、tbody 等。
5. none (display: none) - 表示元素不会在页面中显示,既不占据空间也不响应事件,常用于动态控制元素的显示和隐藏。
相关问题
html display属性
HTML display属性用于设置HTML元素的显示方式,即元素在页面中如何显示。它可以控制元素的布局、大小和位置等方面。
常用的display属性值包括:
1. block:将元素显示为块级元素,即在页面中占据一整行,可以设置宽度、高度、内边距和外边距等属性。
2. inline:将元素显示为行内元素,即元素在文本行内,不会独占一行,只能设置水平方向的内边距和外边距等属性。
3. inline-block:将元素显示为行内块元素,即元素在文本行内,但可以设置宽度、高度、内边距和外边距等属性。
4. none:将元素隐藏,不占据任何空间。
5. flex:将元素显示为弹性盒子容器,可以用来实现复杂的布局。
6. grid:将元素显示为网格容器,可以用来实现复杂的布局。
7. table:将元素显示为表格,可以用来实现表格布局。
8. table-cell:将元素显示为表格单元格,只能用于table元素的子元素。
html中display属性
HTML中的display属性用于控制元素的显示方式。常见的取值包括:
- block:元素将以块级元素的方式进行显示,即占据一行或多行,可以设置宽度和高度;
- inline:元素将以行内元素的方式进行显示,即元素被包含在一行内,不能设置宽度和高度;
- inline-block:元素将以行内块级元素的方式进行显示,即元素被包含在一行内,但可以设置宽度和高度;
- none:元素将不会被显示出来,即隐藏元素。
还有一些其他的取值,如table、flex等,用于控制元素的布局方式。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://img-home.csdnimg.cn/images/20210720083646.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)
![](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)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)