块级元素和行内元素是布局最基本的两种元素,常见的块级元素有div,p,form,ul,ol,li等,常见的行内元素有span,strong,em等.
块级元素和行内元素有什么区别呢?
块级元素会独占一行,默认情况下,其宽度自动填满父元素宽度,行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下才会换行,其宽度随元素内容变化而变化.
块级元素可以设置width,height属性,行内元素设置width,height属性无效.块级元素即使设置了宽度,仍然是独占一行.
块级元素可以设置margin和padding属性,行内元素的argin和padding属性很奇怪,水平方向margin-left,margin-right, padding-left,padding-right都产生边距效果,但是竖直方向的margin-top,margin-bottom,padding-top,padding-bottom却不会产生边距效果.
块级元素和行内元素的CSS相关属性是display,其中块级元素对应于display:block,行内元素对应于display:inline.我们可以修改dispaly属性切换块级元素和行内元素
--------------------------
display:inline-block它是行内的块级元素,它拥有块级元素的特点,可以设置长宽,可以设置margin和padding属性,但是却不是独占一行,它的宽度并不占满父元素,而是和行内元素一样,可以和其他行内元素在同一行里.
IE6和IE7是不支持display:inline-block的,但是可以触发它的hasLayout
如下图:
IE6和IE7是不支持display:inline-block的,但是可以触发它的hasLayout
将标签p改为span可以触发行内元素hasLayout就可以模拟display:inline-block的效果,span在IE6/7是底对齐,在IE8/F
irefox是顶对齐,所以需要*vertical-align:-10px;
