css里display属性

最新推荐文章于 2024-08-27 18:15:32 发布

tooookq

最新推荐文章于 2024-08-27 18:15:32 发布

阅读量366

点赞数 1

文章标签： css html

本文链接：https://blog.csdn.net/tooookq/article/details/104463267

版权

css里display属性

在了解css的display属性之前，我想先介绍一下display属性所能改变的元素都有什么。

元素类型

元素类型可分为三种，分别是：

块状元素（例如div、dl、form、p等）
内联元素（例如a、b、br、img、input等）
可变元素

也可以分为：块状元素、内联元素、内联块元素

而在盒子模型可通过display属性改变默认的显示类型。

display的属性

盒子模型可通过display属性来改变默认的显示类型

display的属性值

display的属性值有许多，较常用到的有：block、inline、list-item、none、inline-block等，还有可通过display属性值改变表格元素的table、inline-table、table-row等，下面具体介绍较为常用的display属性值：

none ：此元素不会被显示。

如以下代码：
```
.box{
	height: 300px;
	width: 300px;
	background-color: blue;
	margin: 0 auto;
}
```
在未加上display：none之前，在浏览器中显示如下图：

加上display：none属性时，元素将不在浏览器中显示。
block：此元素将显示为块级元素，使元素的类型转变为块状元素，如以下代码：
```
em{
	height: 300px;
	width: 300px;
	background: blue;
}
```
在加上display：block属性时，浏览器中显示如下图：

加上display：block时显示出了块状元素的特点，如下图:
inline：此元素会被显示为内联元素。

如以下代码：
```
.box{
	height: 300px;
	width: 300px;
	background-color: blue;
	margin: 0 auto;
    diplay:inline;
}
```
加上inline属性后，显示出内联元素的特点，如下图：

该div从块状元素转换成内联元素。
inline-block：此元素会被显示为行内块元素。

如以下代码：
```
<em>display:block</em><i>行内</i>
```
```
em{
	height: 300px;
	width: 300px;
	background-color: blue;
	margin: 0 auto;
	display: inline-block;
}
```
在浏览器中，既有块状元素的特点，又有内联元素的特点，如下图：
list-item：此元素会作为列表显示。

如以下代码：
```
em{
	height: 300px;
	width: 300px;
	background-color: blue;
	/*display: list-item;*/
}
```
没有加上display：list-item时，在浏览器显示为如下图：

而加上后显示为如下图：

元素转换成列表类型，有了列表类型的特点。