CSS display

CSS display是CSS的最重要属性，用于控制元素的布局。它指定了元素的显示方式。

每个元素根据其性质都有默认的显示值。网页上的每个元素都是一个矩形框，并且 CSS属性定义了该矩形框的行为。

CSS显示默认属性

默认值	内联
继承	否
动画支持	否
版本	css1
javascript语法	object.style.display="none"

语法

 display:value;

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 Bianchenghao6.com</p>
 <p>Python教程、</p>
 <p>HTML教程、</p>
 <p>Javascript教程、</p>
 <p>CSS教程。</p>
 </body>
 </html>

输出：

Hello Bianchenghao6.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 Bianchenghao6.com</p>
 <p>Python教程、</p>
 <p>HTML教程、</p>
 <p>Javascript教程、</p>
 <p>CSS教程。</p>
 </body>
 </html>

输出：

Hello Bianchenghao6.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 Bianchenghao6.com</p>
 <p>Python教程。</p>
 <p>HTML教程。</p>
 <p>Javascript教程。</p>
 <p>CSS教程。</p>
 </body>
 </html>

输出：

Hello Bianchenghao6.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 Bianchenghao6.com</p>
 <p>Python教程。</p>
 <p>HTML教程。</p>
 <p>Javascript教程。</p>
 <p>CSS教程。</p>
 </body>
 </html>

输出：

Hello Bianchenghao6.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>元素。

CSS Cursor

CSS line-height