haslayout初步认知

最新推荐文章于 2022-05-12 09:12:35 发布

ac601458466

最新推荐文章于 2022-05-12 09:12:35 发布

阅读量297

点赞数

分类专栏： html+css 文章标签： css 布局 layout float margin

本文链接：https://blog.csdn.net/ac601458466/article/details/48858519

版权

html+css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

———-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，那么还是按照块元素的自适应父盒子的宽度。
行内元素触发后还是行联显示，如果只定义了高度而没有定义宽度，那么会根据内容来撑开宽度。

ac601458466

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
haslayout初步认知

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

扫一扫