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个,表明此标签为 内联块,如(<a>,<img>,<input>)
区块和内联块最大的区别就是,区块可以设置宽、高、居中对齐等操作,而内联块不行
也就是说,当你需要将一张图片居中,或者要设置区域大小,或单独一行显示,就用到你说的这个样式
反之,你若想把区块变为内联块,则将display:none就可以了。
下面看如上的代码。
<a id="link" href="#">链接</a>
如上的链接,如果使用如下的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对应运用代码:
<span class="divcss5">我的后面文字会换行</span>我是被前面的divcss5对应CSS属性换行。
<span>不会被换行,因为我没有被设置display:block</span>
最后看inline的效果
Css代码
ul.divcss5 li{display:inline}
解释:ul.divcss5对应li css样式属性为display:inline
Html对应代码:
<ul>
<li>我父级ul没有divcss5样式</li>
<li>独立的行</li>
<li>独立的行</li>
</ul>
<ul class="divcss5">
<li>我父级ul有divcss5样式</li>
<li>我站成一排</li>
<li>我在divcss5下li站成一排</li>
</ul>