css-display属性辨析

来源：互联网发布：北京赛车分析软件编辑：程序博客网时间：2024/05/19 10:35

经常看到这样的属性，block、inline也用的比较多，但是什么让它们产生的差异，并没有深究过，inline-block不太明白怎么回事，今天做一个小结。

block、inline就不多说，一个块儿级，一个行级，inline-block则是对外表现是行级，包含的元素则表现块儿级属性。具体看下边解释以及样例。

1、display:block

块儿级对象，默认宽度是100%，如果没有采用‘float:left|right’样式，相邻的两块儿对象就会分排在不同的两行上。

例子：

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>display</title> <style>li{display:block;    height:50px;border:2px solid #4cAf50}</style></head><body><ul><li><a href="/html/" target="_blank">HTML</a></li><li><a href="/css/" target="_blank">CSS</a></li><li><a href="/js/" target="_blank">JavaScript</a></li><li><a href="/xml/" target="_blank">XML</a></li></ul></body></html>

结果：

2、display:inline

内联对象的宽度取决于其内部元素的宽度与padding样式之和。不可直接指定其宽度与高度（示例代码中可以看出来即使设置了，也没有用）。相邻的两个内联对象会排在同一行上。
例子：

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>display</title> <style>li{display:inline;    height:50px;border:2px solid #4cAf50}</style></head><body><ul><li><a href="/html/" target="_blank">HTML</a></li><li><a href="/css/" target="_blank">CSS</a></li><li><a href="/js/" target="_blank">JavaScript</a></li><li><a href="/xml/" target="_blank">XML</a></li></ul></body></html>

结果：

3、inline-block

应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性

例子：

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>display</title> <style>li{display:inline-block;    height:50px;border:2px solid #4cAf50}</style></head><body><ul><li><a href="/html/" target="_blank">HTML</a></li><li><a href="/css/" target="_blank">CSS</a></li><li><a href="/js/" target="_blank">JavaScript</a></li><li><a href="/xml/" target="_blank">XML</a></li></ul></body></html>

结果：

(div 块儿对象；span 内联对象)

0 0