CSS display
CSS display是CSS的最重要属性，用于控制元素的布局。它指定了元素的显示方式。
每个元素根据其性质都有默认的显示值。网页上的每个元素都是一个矩形框，并且
CSS 属性定义了该矩形框的行为。
CSS显示默认属性
| 默认值 |
内联 |
| 继承 |
否 |
| 动画支持 |
否 |
| 版本 |
css1 |
| javascript语法 |
object.style.display="none" |
语法
CSS显示值
有以下几种常用的CSS显示值。
display: inline;
display: inline-block;
display: block;
display: run-in;
display: none;
1）CSS display inline
display inline仅采用所需的宽度。它不会强制换行，因此在嵌入式示例中文本流不会中断。 内联元素是：
<span>
<a>
<em>
<b>等
我们来看一个 display inline CSS显示示例。
<!DOCTYPE html>
<html>
<head>
<style>
p {
display: inline;
}
</style>
</head>
<body>
<p>Hello Lidihuo.com</p>
<p>Python教程、</p>
<p>HTML教程、</p>
<p>Javascript教程、</p>
<p>CSS教程。</p>
</body>
</html>
输出：
Hello Lidihuo.com Python教程、HTML教程、Javascript教程、CSS教程。
2）CSS display inline-block
CSS display inline-block元素与inline元素非常相似，但是区别在于您可以设置宽度和高度。
<!DOCTYPE html>
<html>
<head>
<style>
p {
display: inline-block;
}
</style>
</head>
<body>
<p>Hello Lidihuo.com</p>
<p>Python教程、</p>
<p>HTML教程、</p>
<p>Javascript教程、</p>
<p>CSS教程。</p>
</body>
</html>
输出：
Hello Lidihuo.com Python教程、HTML教程、Javascript教程、CSS教程。
3）CSS display block
CSS display block元素会占用尽可能多的水平空间，表示块元素占据了整行的全部可用宽度。
<!DOCTYPE html>
<html>
<head>
<style>
p {
display: block;
}
</style>
</head>
<body>
<p>Hello Lidihuo.com</p>
<p>Python教程。</p>
<p>HTML教程。</p>
<p>Javascript教程。</p>
<p>CSS教程。</p>
</body>
</html>
输出：
Hello Lidihuo.com
Python教程。
HTML教程。
Javascript教程。
CSS教程。
4）CSS display run-in
run-in元素是一个块/行内元素混合，对于标题效果比较有用，可以将标题作为文本段落的一部分出现。
在css中，只需要改变元素的display值，并让下一个元素作为块级元素框，就可以使元素成为run-in元素。
如果一个元素生成run-in框，那么该框后面是一个块级框，run-in元素将成为块级框开始处的一个行内框。
run-in元素会从其原先的父元素继承属性，只有run-in后面是一个块级框时run-in才起作用。
目前很少有浏览器支持run-in元素。
<!DOCTYPE html>
<html>
<head>
<style>
p {
display: run-in;
}
</style>
</head>
<body>
<p>Hello Lidihuo.com</p>
<p>Python教程。</p>
<p>HTML教程。</p>
<p>Javascript教程。</p>
<p>CSS教程。</p>
</body>
</html>
输出：
Hello Lidihuo.com
Python教程。
HTML教程。
Javascript教程。
CSS教程。
5）CSS display none
"none"值完全将元素从页面中隐藏，不会占用任何空间。
<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
display: none;
}
</style>
</head>
<body>
<h1>此标题是可见的。</h1>
<h1 class="hidden">这是不可见的。</h1>
<p>您可以看到隐藏的标题不包含任何空格。</p>
</body>
</html>
输出：
此标题是可见的。
这是不可见的。
您可以看到隐藏的标题不包含任何空格。
CSS display值
| 属性值 |
说明 |
| block |
元素呈现为块级元素。 |
| compact |
元素呈现为块级元素或内联元素，取决于上下文。 |
| inherit |
display 属性的值从父元素继承。 |
| inline |
默认。元素呈现为内联元素。 |
| inline-block |
元素呈现为内联盒子内的块盒子。 |
| none |
元素不会被显示。 |
| run-in |
元素呈现为块级或内联元素，取决于上下文。 |
| flex |
它用于将元素显示为块级flex容器。这是CSS3中的新功能。 |
| inline-flex |
用于将元素显示为内联级别的弹性容器。这是CSS3中的新功能。 |
| inline-table |
它将元素显示为内联级表。 |
| list-Item |
它使元素的行为类似于<li>元素。 |
| marker |
该值在盒子前后设置内容作为标记（与 :before 和 :after 伪元素一起使用，否则该值与 "inline" 是相同的）。 |
| table |
它使元素的行为类似于<table>元素。 |
| table-caption |
它使元素的行为类似于<caption>元素。 |
| table-column-group |
它使元素的行为类似于<colgroup>元素。 |
| table-header-group |
它使元素的行为类似于<thead>元素。 |
| table-footer-group |
它使元素的行为类似于<tfoot>元素。 |
| table-row-group |
它使元素的行为类似于<tbody>元素。 |
| table-cell |
它使元素的行为类似于<td>元素。 |
| table-row |
它使元素的行为类似于<tr>元素。 |
| table-column |
它使元素的行为类似于 <col>元素。 |
