【CSS笔记之十】深入认识display:inline-block和hasLayout

【CSS笔记之十】display:inline-block和hasLayout

hasLayout设计的初衷是用于辅助块级元素的盒子模型的,它是用于块级元素的。如果用于行内元素,会引发一些特殊效果。

设置宽高属性width、height值都可以触发hasLayout,但是有时候带来副作用,现在常用zoom:1;来触发,极少数非常复杂的css设置情况zoom无效的时候,需要借助更为强大的“position:relative”来触发hasLayout。

块元素会独占一行,默认宽度自动填满其父元素宽度,可以设置width、height、margin、padding属性;行内元素一行排满才会换行,宽度随元素内容多少变化,设置width、height属性无效,只有水平方向的margin、padding边距有效果。

常见的块级元素有div、p、table、fieldset、form、ul、ol、dl、h1~h6、hr、pre、address、blockquote、center、dir、menu、noframes、noscript。

常见内联元素有input span strong em a abbr acronym br img select textarea等等。

可以通过修改display属性值转行块元素和行内元素。

display的值除了block和inline,还有其他值,例如list-item、teble-cell等,但因为IE6和IE7浏览器支持的display类型很少,所以为兼容IE,真正能用的display类型只有block、inline和none三种。

再回顾一下display的值有哪些:

描述
none 此元素不会被显示,也不占位,不同于visibility:hidden的占位隐藏。
block 此元素将显示为块级元素,此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block 行内块元素。(CSS2.1 新增的值)
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
marker CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示(类似 ),表格前后带有换行符。
inline-table 此元素会作为内联表格来显示(类似 ),表格前后没有换行符。)。)。)。)。)。)
table-row-group 此元素会作为一个或多个行的分组来显示(类似
table-header-group 此元素会作为一个或多个行的分组来显示(类似
table-footer-group 此元素会作为一个或多个行的分组来显示(类似
table-row 此元素会作为一个表格行显示(类似
table-column-group 此元素会作为一个或多个列的分组来显示(类似
table-column 此元素会作为一个单元格列显示(类似
table-cell 此元素会作为一个表格单元格显示(类似
table-caption 此元素会作为一个表格标题显示(类似
inherit 规定应该从父元素继承 display 属性的值。


IE6、IE7支持但不完全支持display:inline-block属性,但IE8+和FF等标准浏览器支持。

注释:如果规定了 !DOCTYPE,则 Internet Explorer 8 (以及更高版本)支持属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。

利用hasLayout可以再不支持display:inline-blcok的IE6和IE7下模拟出display:inline-block的效果,实现IE6、IE7、IE8+和Firefox都兼容的display:inline-block的应用。但是也有一些问题需要特别注意:

1)  在IE6、IE7中不识别display:inline-block属性,但使用inline-block属性在IE下会触发layout,从而使内联元素拥有了display:inline-block属性的表症。

2)  在IE5.5中开始支持 inline-block 。你可以使用 inline-block 使对象获得布局而无需指定确切的高( height )和宽( width )。

3) IE6/IE7的inline-block属性只对原生默认的内联元素(span, a, em......)有效,对于块级元素(div,p,ul......)无效。

    In IE 6 and 7 inline-block works only on elements that have a natural display: inline.IE doesn't apply the value inline-block for the CSS display property on HTML elements that default to block level.

4) 两个结论: 1、IE6/7不识别inline-block,只是触发了layout,表现跟inline-block块元素表现一样。2、IE6/7不完全支持inline-block,只对内联元素有效。

5) 看官方的说法,确证对inline-block的认识

The following table shows Cascading Style Sheets (CSS) properties and corresponding values that, if set, cause an element to have layout.
下表列出一些CSS属性及其值,以下属性一旦设置,将触发元素的layout:
CSS propertyValue
display        inline-block
height        any value
float        left or right
positionabsolute
width        any value
-ms-writing-modetb-rl
zoom        any value


6)  延伸问题:IE下块元素如何实现 display:inline-block 的效果?

有两种方法:

1、先使用 display:inline-block 属性触发块元素,然后再定义 display:inline,让块元素呈递为内联对象(两个display 要先后放在两个 CSS 声明中才有效果,这是 IE 的一个经典 bug ,如果先定义了 display:inline-block,然后再将 display 设回 inline 或 block,layout 不会消失)。代码如下:

div {display:inline-block;}
div {display:inline;}

说明:在IE下,display: inline-block只是触发了元素的layout。比如将display: inline-block给到div上,只能保证这个div拥有块元素的特征(可以设置宽度,高度等),但是还是行布局(产生换行)。接下来要设置display: inline,更改这个div的布局为内联布局(不产生换行)。

2、直接让块元素设置为内联对象呈递(设置属性 display:inline),然后触发块元素的 layout(可使用zoom:1 等)。代码如下:

div {display:inline; zoom:1;}


认识了display:inline-block和hasLayout的原理和方法,在实际中解决相关的bug,让我们的CSS之路更加通畅!


你可能感兴趣的:(CSS笔记)