深入认识display:inline-block和haslayout

前端开发日总结怎么写 web前端开发怎么学 web前端开发怎么自学

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三种。

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

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

延伸问题: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;}

前端开发怎么看 前端开发怎么利用ps 前端开发怎么样,好学吗

» 本文来自:前端开发者 » 《深入认识display:inline-block和haslayout》
» 本文链接地址:https://www.rokub.com/5971.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!