DIV CSS display (block none inline)属性的用法
在一般的CSS布局制作时候，我们常常会用到display对应值有block、none、inline这三个值。下面我们来分别来认识和学习什么时候用什么值。这里通过CSS display知识加实例、图演示讲解方法来学习和了解DIV CSS display。
| 目录 CSS display使用 display的值有哪些 css display block css display none css display inline |
1、CSS display使用
以下为DIV CSS运用dispaly
CSS代码：
.divcss{display:none}
Html对应运用：
<div class="divcss">我是测试内容</div>
2、display的值有哪些
Css display值与解释
参数：
block :块对象的默认值。用该值为对象之后添加新行。之前也添加一行。
none :隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
inline :内联对象的默认值。用该值将从对象中删除行。如果其前后都是inline的则在同一行
compact :分配对象为块对象或基于内容之上的内联对象
marker :指定内容在容器对象之前或之后。要使用此参数，对象必须和:after及:before 伪元素一起使用
inline-table :将表格显示为无前后换行的内联对象或内联容器
list-item :将块对象指定为列表项目。并可以添加可选项目标志 run-in :分配对象为块对象或基于内容之上的内联对象 table :将对象作为块元素级的表格显示 table-caption :将对象作为表格标题显示 table-cell :将对象作为表格单元格显示 table-column :将对象作为表格列显示 table-column-group :将对象作为表格列组显示 table-header-group :将对象作为表格标题组显示 table-footer-group :将对象作为表格脚注组显示 table-row :将对象作为表格行显示 table-row-group :将对象作为表格行组显示3、css display:block
Display:block是我们常用的，block也是Display默认的值。
block元素(即默认display:block)的特点是：
· 总是在新行上开始；
· 该对象随后的内容自动换行;
· 高度，行高以及顶和底边距都可控制；
· 宽度缺省是它的容器的100%，除非设定一个宽度
<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。(意思是他们默认显示方式是block)
实例1.
CSS代码：
.divcss{display:block} Html对应运用代码：
我的后面文字会换行我是被前面的divcss对应CSS属性换行。不会被换行,因为我没有被设置display:block
对应结果截图:
实例2.
the first line
the second line
test div
可以看出这就是三行，可以看出宽度默认设置成其容器的100%，也可以设置成其他百分比。
4、css display:none
此display的none值，我们也常常使用，用于隐藏对象内容，被隐藏的对象也不会占用自身固有宽度高度空间。
例如在导航条的二级菜单中就会使用此属性显示和隐藏二级菜单。
5、css display:inline
Display:inline,我们常常在li中使用它。功能是让li排成一排（称：删除行）。
接下来我们以一个未设置li列表与一个设置css Display inline样式对比实例演示演示。
CSS代码
ul.divcss li{display:inline} 解释：ul.divcss对应li CSS样式属性为display:inline
inline元素(即默认display:inline)的特点是：
· 和其他元素都在一行上；
· 高，行高及顶和底边距不可改变；
· 宽度就是它的文字或图片的宽度，不可改变。
<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子
Html对应代码：
- 我父级ul没有divcss5样式
- 我是独行
- 我是独行
- 我父级ul有divcss5样式
- 我站成一排
- 我在divcss5下li站成一排
演示结果图：
说明：设置css为display:inline的li对象，li被排成一排，而未设置的li列表对象仍然继承原来自身独占一行的CSS样式.
inline和block可以控制一个元素的行宽高等特性，需要切换的情况如下：
1. 让一个inline元素从新行开始；
将需要新开一行的元素的display设置成block.
2. 让块元素和其他元素保持在一行上；
将块元素的display的属性设置成inline.
3. 控制inline元素的宽度（对导航条特别有用）；
4. 控制inline元素的高度；