您的位置：首页 > Web前端 > CSS

haslayout初步认知

2015-10-02 10:18 656 查看

———-IE专有的Layout

hasLayout的字面意思是 “拥有布局”。在说明 hasLayout 之前，需要先说明一个跟它相关的概念–”Layout”，也就是“布局”。 “Layout”是IE/Win的专有概念，它决定了元素如何对其内容进行定位和尺寸计算，与其他元素的关系和相互作用，以及对应用还有使用者的影响。 “Layout”可以被某些CSS特性(property)不可逆的触发，而某些HTML元素本身就具有layout。 “Layout”在IE/Win中通过 hasLayout 属性来判断一个元素是否拥有layout。

在ie中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。当一个元素的hasLayout属性值为true时，它负责对自己和可能的子孙元素进行尺寸计算和定位。虽然这意味着这个元素需要花更多的代价来维护自身和里面的内容，而不是依赖于祖先元素来完成这些工作。

hasLayout属性

hasLayout 是IE浏览器渲染引擎的一个内部组成部分。在IE浏览器中，一个元素要么自己对自身的内容进行组织和计算大小，要么依赖于包含块来计算尺寸和组织内容。为了协调这两种方式的矛盾，渲染引擎采用了 hasLayout的属性，属性值可以为true或false。当一个元素的 hasLayout 属性值为 true 时，我们说这个元素有一个布局（layout），或拥有布局。

另外注意，IE6以前的版本（也包括IE6及以后所有版本的混杂模式，其实这种混杂模式在渲染方面就相当于IE5.5），通过设置任何元素的 width/height(非auto)都可以触发hasLayout。但在IE6/IE7的标准模式中的行内元素上却不行，设置 display:inline-block才可以，在IE中块级元素可以通过width/height来触发hasLayout。

hasLayout与Block formatting contexts

在IE中，触发hasLayout的元素，与W3C标准中创建了 Block Formatting contexts存在很多相似之处，都能包含浮动元素，都会阻止margin折叠等等，后续会详细的介绍。

下列元素默认 hasLayout=true

<table> <td> <body> <img> <hr> <input> <select> <textarea> <button> <iframe> <embed> <object> <applet> <marquee>

所以我们可以给input设置宽高，layout的特性有可以使元素拥有布局，而不会改变元素的换行/不换行特性。原来元素是可以换行的，触发layout之后还是会换行，如果要一行显示则需要加上display：inline；原来的元素是行内元素。触发layout后，还是会在行内显示，这类似于display：inline-block的效果。

很多情况下，我们把 hasLayout的状态改成true 就可以解决很大部分ie下显示的bug。

hasLayout属性不能直接设定，你只能通过设定一些特定的css属性来触发并改变 hasLayout

状态。下面列出可以触发hasLayout的一些CSS属性值。

display 启动haslayout的值:inline-block 取消hasLayout的值:其他值

————————————– width/height 启动hasLayout的值：除了auto以外的值取消hasLayout的值：auto

————————————— position 启动hasLayout的值：absolute 取消hasLayout的值：static

—————————————- float 启动hasLayout的值：left或right 取消hasLayout的值：none

————————————— zoom 启动hasLayout的值：有值取消hasLayout的值：narmal或者空值

（zoom是微软IE专有属性，可以触发hasLayout但不会影响页面的显示效果。zoom: 1常用来除错，不过 ie 5

对这个属性不支持。）

—————————————- writing-mode: tb-rl 这也是微软专有的属性。 ie7还有一些额外的属性可以触发该属性（不完全列表）： min-height: (任何值) max-height:

(任何值除了none) min-width: (任何值) max-width: (任何值除了none) overflow:

(任何值除了visible) overflow-x: (任何值除了visible) overflow-y: (任何值除了visible)5

position: fixed

举个栗子

ie7中通过width来触发元素的layout来“识别布局”。

<div class="vv"></div>
<div class="wrap">
<div class="box1"></div>
</div>

.vv{float:left;width:200px; height:100px;background:#00ccff;}
.wrap{background:#cc33cc;}
.box1{height:200px; background:#ffff00; margin-top:100px;}

将wrap盒子设置了layout之后，即给wrap加上width：100%；如图

而且就算给box1设置为宽度200px；box1也不会因为父盒子外围的浮动布局而产生位置偏移了。

既然是宽度溢出，那么将wrap的宽度变小，wrap将会在浮动布局的右边显示。

.wrap{background:#cc33cc; width:400px;}

可以看到wrap已经“右浮动了”；

ie父元素根据盒子内部的浮动元素进行计算尺寸。

<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
*{margin:0; padding:0;}
.wrap{border:1px solid #000; margin-top:50px;}
.fl{float:left;width:200px; height:100px; background:#cc0099;}
</style>
</head>
<body>
<div class="wrap">
<div class="fl"></div>
</div>
</body>
</html>

给父元素触发layout，父元素就能够根据子元素重新进行尺寸计算

.wrap{border:1px solid #000; margin-top:50px; width:100%}
或者是
.wrap{border:1px solid #000; margin-top:50px; *zoom:1}
或者是
.wrap{border:1px solid #000; margin-top:50px; *display:inline-block}

但是要记住——行内元素设置height、width是无法触发layout的，可以使用inline-block或者zoom来触发。

块级元素触发layout和行内元素触发layout的不同

块级元素触发后还是会保持原来的换行特性，要变成行联块需要设置inline属性，如果只写了height而没有定义width，那么还是按照块元素的自适应父盒子的宽度。

行内元素触发后还是行联显示，如果只定义了高度而没有定义宽度，那么会根据内容来撑开宽度。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css 布局 layout float margin

相关文章推荐

新的分享

章节导航