现在的位置: 首页 > 综合 > 正文

css中的内联对象与块对象

2013年08月29日 ⁄ 综合 ⁄ 共 931字 ⁄ 字号 评论关闭

 css中的内联对象与块对象

在用CSS做页面的时候,我们总是会想到块对象和内联对象,那到底指的是什么呢?
为什么说加上float或display:block就是块对象了呢?

块对象默认宽度是100%(继承自父元素),如果没有采用“float:left/right;”样式,相邻的两个块对象就会分排在不同的两行上。

内联对象的宽度取决于其内部元素的宽度与padding样式值之和,不可直接指定其宽度与高度(“display:block;”、“float:left/right;”强行转换后可以定义),相邻的两个内联对象会排在同一行上。

  
从这两点就应该可以看出来块对象和内联对象两者的区别,关于为什么加上float就成为块对象了,是因为float默认的就是display:block; display:inline是表示内联对象;display:block表示块对象。

以下更清楚的告诉你两者的区别:

什么是内联对象,什么是块对象?

所有可视的文档对象都是块对象(block element)或者内联对象(inline element)。例如, div 是一个块对象,span 是一个内联对象。

块对象的特征是从新的一行开始且能包含其他块对象和内联对象。从新的一行开始:比如div就是前后断行;
内联对象被呈递时不会从新行开始,能够包含其他内联对象和数据。内联可以这样理解:不从新的一行开始,直接从内容里面,接着往后走。。。是指它能被别的对象内联。。。。

==========================
相关信息参考:css display参数

block   : CSS1   块对象的默认值。将对象强制作为块对象呈递,为对象之后添加新行
none   : CSS1   隐藏对象。与 visibility 属性的hidden值不同,其不为被隐藏的对象保留其物理空间(页面物理尺寸大小空间)
inline   : CSS1   内联对象的默认值。将对象强制作为内联对象呈递,从对象中删除行

改变此属性值(即:display)对其周围内容布局的影响可能是:

属性值设为 block 的在对象后面添加新行。
属性值设为 inline 的从对象中删除一行。
属性值设为 none 的对象隐藏并释放其在文档中的物理空间(页面物理尺寸大小空间)。
 

抱歉!评论已关闭.