display显示属性理解

- 日理万妓 2022-03-31 13:31 474阅读 0赞

# [display显示属性理解][display] #

display属性设置一个元素应如何显示，是我们在前端开发中常常使用的一个属性，其中，最常见的有：

**目录**

*  [**display:none;表示此元素将不被显示。**][display_none]
 *  [**display：block;将元素显示为块元素。（又叫块级元素）**][display_block]
 *  [**display:inline;将元素显示为内联元素。（又叫行内元素）**][display_inline]
 *  [**display:inline-block;将元素显示为内联块元素。**][display_inline-block]
 *  [**display:inherit;规定应该从父元素继承 display 属性的值。**][display_inherit_ display]

## 一.隐藏元素display:none; ##

**主要区别visibility：hidden; 和display:none**  
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。  
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。  
visibility属性指定一个元素应可见还是隐藏。默认元素是可见的：visibility:visible;

比如，当我们在浏览网页时，如果看到了某个烦人的广告遮挡了我们的实现，更为可气的是，它还没有关闭的选项，这时（以chrome为例），我们就可以按下F12，打开开发者工具，点击element，然后使用左上角的选择工具选中想要删除的广告，可以看到element中会有高亮的一行或几行代码，右键，点击Add Attribute，然后输入：style="display:none"，这时就可以发现广告不见啦！

--------------------

## 二.块元素display:block; ##

**块元素特性：**

*  块元素的display属性值默认为block。
 *  总是以一个块的形式表现出来，占领一整行。若干同级块元素会从上之下依次排列（使用float属性除外）。
 *  可以设置高度、宽度、各个方向外补丁（margin）以及各个方向的内补丁（padding）。支持margin：auto;
 *  当宽度（width）缺省时，它的宽度时其容器的100%，除非我们给它设定了固定的宽度。
 *  块元素中可以容纳其他块级元素或行内元素。
 *  常见的块元素由<p><div><h1><li>等等。

## 三.内联元素display:inline; ##

**内联元素特性：**

*  内联元素的display属性值默认为inline。
 *  它不会单独占据一整行，而是只占领自身的宽度和高度所在的空间。若干同级内联元素会从左到右（即某个行内元素可以和其他行内元素共处一行），从上到下依次排列。
 *  内联元素不可以设置高度、宽度，其高度一般由其字体的大小来决定，其宽度由内容的长度控制。
 *  内联元素只能设置左右的margin值和左右的padding值，而不能设置上下的margin值和上下的padding值。因此我们可以通过设置左右的padding值来改变行内元素的宽度。
 *  常见的内联元素由<a><em><img>等等。
 *  内联元素一般不可以包含块级元素。

通过对一个行内元素设置display:　block;可以将行内元素设置为块级元素，进而设置它的宽高和上下左右的padding和margin。

### 应用： ###

如果我们经常会制作导航栏，这时就要使用ul li 和a组合的方式，但是<a>是行内元素，我们无法设置它的宽和高，这时，就可以在<a>的样式表中，将之设置为display：block。这样就可以设置它的宽和高，以及上下左右的margin和padding以达到我们想要的效果了。

1.  <!DOCTYPE html>
2.  <html lang="en">
3.  <head>
4.      <meta charset="UTF-8">
5.      <title>Title</title>
6.      <style>
7.          \*\{padding: 0;margin:0;list-style: none;\}
8.          ul li\{float: left;\}
9.          a\{display:block;width: 30px;height: 30px;background: yellow;margin: 5px; text-decoration: none;text-align: center;line-height: 30px;\}
10.     </style>
11. </head>
12. <body>
13.     <ul>
14.         <li><a href="">1</a></li>
15.         <li><a href="">2</a></li>
16.         <li><a href="">3</a></li>
17.         <li><a href="">4</a></li>
18.         <li><a href="">5</a></li>
19.     </ul>
20. </body>
21. </html>

效果如下：  
![1-13.png][]

--------------------

## 四.内联块元素display:inline-block; ##

**内联块元素特性：**

*  不强制换行,没有宽度内容撑开宽高
 *  支持宽、高、margin、padding，但不支持margin：auto;
 *  内联块元素居中可使用父容器居中。
 *  即使margin padding都设置为0；代码换行仍然会产生空白符，解决方法：设置父元素字体大小为0像素
 *  IE6,7只支持inline元素设置为inline-block，其它类型元素均不可以
 *  常见内联块元素

根据名字，实际上我们就可以才出来它是结合了inline和block的特性于一身。即设置了inline-block属性的元素既具有block元素可以设置width和height属性的特性，又保持了inline元素不换行的特性。举例说明，我们之前在做横向导航菜单的时候，一般是用ul li a组合，然后将li设置为float，这样就可以得到横向的导航标签了。而现在我们可以通过li和display:inline-block;来实现。

代码如下：

1.  <!DOCTYPE html>
2.  <html lang="en">
3.  <head>
4.      <meta charset="UTF-8">
5.      <title>Title</title>
6.      <style>
7.          ul,li,a,\*\{padding:0; margin:0;list-style: none;text-decoration: none;\}
8.          li\{display: inline-block;border: thin solid red;\}
9.      </style>
10. </head>
11. <body>
12.     <ul>
13.         <li><a href="">1</a></li>
14.         <li><a href="">2</a></li>
15.         <li><a href="">3</a></li>
16.         <li><a href="">4</a></li>
17.         <li><a href="">5</a></li>
18.     </ul>
19. </body>
20. </html>

**效果图如下：**  
![2-6.png][]  
确实实现了横向的排列，实际上，也可以设置宽和高，大家可以自己尝试。但是，很明显有一个问题---我将padding和margin的值都设置为0，为什么他们之间还会有距离呢？实际上，这是inline元素自身出现的问题，而inline-block结合了inline和block属性，当然也就存在这个问题了。这些空隙是空白符，在浏览器中，空白符是不会被浏览器忽略的，多个连续的空白符浏览器会自动将其合并成一个。我们编写代码时写的空格，换行都会产生空白符。所以自然而然的两个元素之间会有空白符，如果将上述例子中的a标签写成一行，空白符消失，菜单之间也就紧凑起来了。

解决方法：我们要明白空白符归根结底是一个字符，只要我们将ｕｌ中的字符的大小设置位０，那么空白符也就不会存在了，但是这是a的字体大小也会继承ul的字体大小，那么就不见了，该怎么办，只需要将a中再设置一个字体不为0的大小覆盖即可。

1.  <!DOCTYPE html>
2.  <html lang="en">
3.  <head>
4.  <meta charset="UTF-8">
5.  <title>Title</title>
6.  <style>
7.  ul\{font-size: 0;\}
8.  ul,li,a,\*\{padding:0; margin:0;list-style: none;text-decoration: none;\}
9.  li\{display: inline-block;border: thin solid red;font-size: 15px;\}
10. </style>
11. </head>
12. <body>
13. <ul>
14. <li><a href="">1</a></li>
15. <li><a href="">2</a></li>
16. <li><a href="">3</a></li>
17. <li><a href="">4</a></li>
18. <li><a href="">5</a></li>
19. </ul>
20. </body>
21. </html>

最终得到的效果图如下：

![3-5.png][]

## 五.display:inherit; ##

[display]: https://www.cnblogs.com/zhaowy/p/8400215.html
[display_none]: http://www.zhaowy.cn/web/css/546/.html#A1
[display_block]: http://www.zhaowy.cn/web/css/546/.html#A2
[display_inline]: http://www.zhaowy.cn/web/css/546/.html#A3
[display_inline-block]: http://www.zhaowy.cn/web/css/546/.html#A4
[display_inherit_ display]: http://www.zhaowy.cn/web/css/546/.html#A5
[1-13.png]: /images/20220331/3fca3bf9b941499799401414a3c28de9.png
[2-6.png]: /images/20220331/6ec8dd6e0c9245e2998dd172107c5840.png
[3-5.png]: /images/20220331/95c53b30ba144e0faf92ae897c1f1ac7.png