display 属性是 CSS 中最重要的属性之一，主要用来控制元素的布局，通过 display 属性您可以设置元素是否显示以及如何显示。
一、display 属性的作用
1. display 属性可以设置元素的 内部和 外部 显示类型
（1）外部显示类型：
a.元素的外部显示类型有 block块、inline内联等。
b.外部显示类型将决定该元素在流式布局中的表现。
（2）内部显示类型：
内部显示类型flex 布局、grid 网格布局、流式布局等。
元素的内部显示类型可以控制其子元素的布局方式。
2. 流式布局（文档流 或 常规流）：
“文档流” 或 “流式布局” 是在对布局进行任何更改之前（默认情况下），在页面上显示 “块” 和 “内联” 元素的方式。
简单直白点来说，他是一种排版方式，这种排版方式规定了块级和内联元素在页面中如何排版显示。
（1）流式布局中 - 块级元素排版方式：
块级盒子会从包含块的顶部开始，按序垂直排列。
同级盒子间的垂直距离会由“margin”属性决定。
相邻两个块级盒子之间的垂直间距会遵循外边距折叠原则被折叠
（2）流式布局中 - 内联元素排版方式：
盒子会从包含块的顶部开始，按序水平排列。
只有水平外边距、边框和内边距会被保留。
这些盒子可以以不同的方式在垂直方向上对齐：可以底部对齐或顶部对齐，或者按文字底部进行对齐
二、元素外部显示类型
1. splay 通过以下属性值来指定元素的显示类型
（1）block 块级
（2）inline-block 行内块
（3）inline 行内
2. 元素显示类型分为：块级 和 内联 等
3. 内联（行内）元素又分为：inline 内联元素和 inline-block 行内块元素
（一）diblock 块级元素
1. 常见的块级元素有：
<p>、<div>、<ul>、<ol>、<li>、<h1>~<h6>、<dl> 等
2. 块级元素的特点：
（1）独占一行
（2）可以设置 width、height 属性。
（3）在不设置宽情况下，宽默认为父元素内容区宽。
（4）块级元素里可以放任意类型元素，但是文字类元素标签内不能放其它块元素
（5）p 标签里不能放 p 和 div 标签。
（6）h1-h6 标签里不能放 p 和 div 标签。
（二）inline-block 行内块元素
1. 以下元素具有行内块元素的特性：
<img>、表单类元素、<video>、<audio> 等，这些元素本质上叫 可替换元素（归类归到行内元素）
2. 行内块元素的特点：
（1）相邻的行内块（或行内）元素会在一行显示，放不下会换行。
（2）相邻的行内块元素之间会有空白间隙。
（3）可设置 width、height 属性，元素默认宽为它本身内容宽
（三）inline 内联（行内）元素
1. 常见的行内元素有：
<a>、<strong>、<span>、<i>、<del> 等
2. 行内元素特点：
相邻的行内元素会在一行显示，放不下时会换行显示
设置 width、height 属性是无效的。其宽高随其内容大小而撑开。
行内元素里只能放文本或其它行内元素
3. 注意：
<a>标签中不能再放<a>标签，但<a>标签中可以放块级元素
实际开发中，在某些情况下会把<a>标签转换为块级元素
三种元素类型对比
| 元素类型 | 排列方式 | 设置宽高效果 | 内容 |
| 块级(block) | 独占一行 | width、height 有效 | 任意元素 |
| 行内块(inline-block) | 一行可显示多个 | width、height 有效 | 行内或行内块元素 |
| 内联（inline） | 一行可显示多个 | width、height 无效 | 行内或文本元素 |
三、行内元素和块级元素的互相转换
我们只需要给对应的元素添加对应display属性值，就可以把元素转换为对应的元素类型。
（1）使用 display: block; 即可将元素转换为块级元素。
举例：
<!DOCTYPE html>
<html>
<head>
<style>
a{
display: block;
width: 150px;
height: 50px;
background-color: #ACC;
line-height: 50px;
text-align: center;
text-decoration: none;
}
</style>
</head>
<body>
<a href="">dotcpp编程链接</a>
</body>
</html>运行结果：
（2）使用 display: inline; 即可将元素转换为行内元素。不过将元素转换为行内元素的应用不多见
（3）使用 display: inline-block; 即可将元素转换为 行内块元素
四、隐藏元素方法
| 属性 | 功能 | 描述 |
| display:none; | 隐藏元素 | 可以将元素隐藏，子孙元素全部隐藏不可见，并且没有任何办法可见。元素隐藏后不会占空间。 |
| visibility:hidden; | 隐藏元素 | 将元素隐藏，子孙元素全部不可见，但是给子孙加上 visibility: visible;时，子孙可见。 隐藏后仍占其位置，会留下空白的一块区域。（基本不用） |
补充：
（1）display 除 none 以外的值，均为显示元素。
（2）visibility:visible; 为显示元素
举例：
display 的属性值 none 可以用来隐藏元素，与visibility: hidden;功能相似，不同的是display: none;在隐藏元素的同时，它还会将元素所占的位置一并隐藏。display: none;通常会与 JavaScript 结合使用来隐藏或显示某个元素，下面通过一个示例来演示一下：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 350px;
height: 100px;
background-color: #AAA;
}
</style>
</head>
<body>
<div id="box"> </div>
<button onclick="change_box(this)">隐藏</button>
<script>
function change_box(obj){
var box = document.getElementById('box');
if(box.style.display == 'none'){
box.style.display = "";
obj.innerHTML = "隐藏";
}else{
box.style.display = "none";
obj.innerHTML = "显示";
}
}
</script>
</body>
</html>运行结果：
五、两种隐藏方法的区别
| 区别 | display: none | visibility: hidden |
| 空间占据性 | 不占据空间 | 占据原空间 |
| 回流与渲染性 | 会产生回流与重绘 | 不会产生回流，只会产生重绘 |
| 对子元素影响 | 子孙元素全部隐藏不可见。并且只要父元素隐藏，子孙没有任何办法可见 | 子孙元素全部不可见，但是给子孙加上 visibility: visible;时，子孙可见。 |
六、去掉行内块元素默认的空白间隙
行内块元素间会默认产生空隙。
产生间隙原因：
（1）元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理
（2）根据 white-space 的处理方式（默认是 normal，合并多余空白），原来 HTML 代码中的回车换行被转成一个空白符，所以元素之间就出现了空隙。
（3）这些元素之间的间距会随着字体的大小而变化
解决办法：
（1）给父元素添加 font-size: 0px; 同时子元素重写 font-size
font-size 属性有继承性，所以父元素 font-size:0; 会继承到子元素 span，则子元素需要重新设置 font-size 大小
（2）给元素添加 float
元素添加 float 后，会脱离文档流，父元素未添加高度时，会出现高度塌陷问题，则需要清除浮动造成的问题。
（3）图片间空隙，给图片添加 display:block;
加了 display:block 之后，图片成为块级元素，独占一行
C语言网提供由在职研发工程师或ACM蓝桥杯竞赛优秀选手录制的视频教程，并配有习题和答疑，点击了解：
一点编程也不会写的：零基础C语言学练课程
解决困扰你多年的C语言疑难杂症特性的C语言进阶课程
从零到写出一个爬虫的Python编程课程
只会语法写不出代码？手把手带你写100个编程真题的编程百练课程
信息学奥赛或C++选手的 必学C++课程
蓝桥杯ACM、信息学奥赛的必学课程：算法竞赛课入门课程
手把手讲解近五年真题的蓝桥杯辅导课程