块级元素和行内元素特性与区别
2017-08-05 本文已影响0人
猿分让我们相遇
块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度.
行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化. 另外
1、块级元素可以设置width,height属性.
2、行内元素设置width,height属性无效,它的长度高度主要根据内容决定.
3、块级元素即使设置了宽度,仍然是独占一行.
4、块级元素可以设置margin和padding属性.
5、行 内元素的margin和padding属性,水平方向的padding-left,padding-right,margin-left,margin- right都会产生边距效果,但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom却不 会产生边距效果.
6、块级元素对应于display:block.
7、行内元素对应于display:inline.
兼容性:display:inline-block;* display:inline;* zoom:1;(IE8以下)
行内块级元素display:inline-block
简单来说就是将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。