html中inline的作用,css block inline的功能及使用

css里面的block和inline属性，是display标签的属性，用来控制网页内容的显示方式的。

下面，我们先看display的语法。

一、display语法

display : block | none | inline | compact | marker | inline-table | list-item | run-in | table | table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group

属性取值：

block  :  CSS1  块对象的默认值。将对象强制作为块对象呈递，为对象之后添加新行

none  :  CSS1  隐藏对象。与 visibility 属性的hidden值不同，其不为被隐藏的对象保留其物理空间

inline  :  CSS1  内联对象的默认值。将对象强制作为内联对象呈递，从对象中删除行

inline-block  :  IE5.5  将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内。

compact  :  CSS2  未支持。分配对象为块对象或基于内容之上的内联对象

marker  :  CSS2  未支持。指定内容在容器对象之前或之后。要使用此参数，对象必须和 :after 及 :before 伪元素一起使用

inline-table  :  CSS2  未支持。将表格显示为无前后换行的内联对象或内联容器

list-item  :  CSS2  将块对象指定为列表项目。并可以添加可选项目标志

run-in  :  CSS2  未支持。分配对象为块对象或基于内容之上的内联对象

二、block inline知识扩展

网页标签是分成区块和内联块2种。一个标签显示一行的称为 区块，如(段落P，标题H系列，DIV等)

，若标签能在一行显示N个，表明此标签为 内联块，如(,,)

区块和内联块最大的区别就是，区块可以设置宽、高、居中对齐等操作，而内联块不行

也就是说，当你需要将一张图片居中，或者要设置区域大小，或单独一行显示，就用到你说的这个样式

反之，你若想把区块变为内联块，则将display:none就可以了。

下面看如上的代码。

链接

如上的链接，如果使用如下的CSS

#link{display:block;width:100px;height:100px;background:red}

此时你会看到一个宽度100和高度100的红色点击区域，如果你不加display:block(默认display:inline)，那么你不会看到一个高度100和宽度100的点击区域.

下面看block的效果

Display:block是我们常用的，block也是Display默认的值。

解释：该对象随后的内容自动换行。

css display block实例

CSS代码：

.divcss5{display:block}

Html对应运用代码：

我的后面文字会换行我是被前面的divcss5对应CSS属性换行。

不会被换行,因为我没有被设置display:block

最后看inline的效果

Css代码

ul.divcss5 li{display:inline}

解释：ul.divcss5对应li css样式属性为display:inline

Html对应代码：

• 我父级ul没有divcss5样式
• 独立的行
• 独立的行

• 我父级ul有divcss5样式
• 我站成一排
• 我在divcss5下li站成一排