CSS Magic Hall: HasLayout은 다음과 같습니다!-CSS 튜토리얼-php.cn

CSS Magic Hall: HasLayout은 다음과 같습니다!

巴扎黑

풀어 주다： 2017-06-28 11:13:04

원래의

1229명이 탐색했습니다.

머리말

저는 이전 버전의 IE에서 많은 이상한 버그가 hasLayout이라는 신비한 문자로 인해 발생한다는 말을 항상 들었습니다. 최근 갑작스러운 긴장감을 살려 CSS를 잘 배워서 수년간 품고 있던 의문점에 대한 답을 찾아보려고 합니다.

hasLayout은 누구인가요?

hasLayout은 IE5.5/6/7에서 간단히 BFC(Block Formatting Context)로 간주될 수 있습니다. 즉, 요소는 자체 콘텐츠를 구성하고 크기를 조정할 수 있거나(즉, 너비/높이를 통해 자체 너비와 높이를 설정) 포함 블록을 구성하고 크기를 조정할 수 있습니다. IFC(즉, 레이아웃이 없음)의 경우 요소는 자체 콘텐츠의 크기를 구성하고 계산할 수 없지만 자체 콘텐츠에 따라 크기가 결정됩니다(즉, 콘텐츠 줄 간격은 line-height를 통해 설정, 요소의 높이를 지원하기 위해 줄 간격을 통해 요소 너비는 너비를 통해 설정할 수 없으며 콘텐츠에 의해서만 결정될 수 있습니다. hasLayout이 true인 경우(소위 "자체" 레이아웃")은 새로운 BFC를 생성하는 요소와 동일하며 요소 자체 자체 콘텐츠가 구성되고 크기가 계산됩니다.
hasLayout이 false인 경우(소위 "레이아웃을 소유하지 않음")는 다음과 같습니다. 요소는 새로운 BFC를 생성하지 않으며 요소는 해당 요소가 속한 포함 블록에 의해 계산되어 구성되고 크기가 지정됩니다.
새로운 BFC를 생성하는 기능과 유사하게 hasLayout은 CSS 속성을 통해 직접 설정할 수 없지만, 이 기능은 특정 CSS 속성을 통해 간접적으로 활성화됩니다. 차이점은 일부 CSS 속성이 되돌릴 수 없는 방식으로 hasLayout을 true로 간접적으로 전환한다는 것입니다. 그리고 기본적으로 html 요소만 새 BFC를 생성하는 반면 기본 hasLayout은 html 요소 이외의 요소에 대해 true입니다.
또한 object.currentStyle.hasLayout 속성을 사용하여 요소에 hasLayout 기능이 활성화되어 있는지 확인할 수 있습니다. html元素，而默认hasLayout为true的元素就不只有html元素了。
另外我们可以通过object.currentStyle.hasLayout属性来判断元素是否开启了hasLayout特性。

到这里我们应该了解到若要理解hasLayout则必须理解BFC，因此这里可参考CSS魔法堂：重新认识Box Model、IFC、BFC和Collapsing margins

默认`hasLayout==true`的元素

<html>, <body><table>, <tr>, <th>, <td><img>,<hr><input>, <button>, <select>, <textarea>, <fieldset>, <legend><iframe>, <embed>, <object>, <applet>,<marquee>

로그인 후 복사

触发`hasLayout==true`的方式

display: inline-block
height: (除 auto 外任何值)
width: (除 auto 外任何值)
float: (left 或 right)
position: absolute
writing-mode: tb-rl
zoom: (除 normal 外任意值)

로그인 후 복사

IE7 还有一些额外的属性(不完全列表)可以触发 hasLayout ：

min-height: (任意值)
min-width: (任意值)
max-height: (除 none 外任意值)
max-width: (除 none 外任意值)
overflow: (除 visible 外任意值，仅用于块级元素)
overflow-x: (除 visible 外任意值，仅用于块级元素)
overflow-y: (除 visible 外任意值，仅用于块级元素)
position: fixed

로그인 후 복사

IE6 以前的版本（也包括 IE6 及以后所有版本的混杂模式，其实这种混杂模式在渲染方面就相当于 IE 5.5），通过设置任何元素的 'width' 或 'height'（非auto）都可以触发 hasLayout ；但在 IE6 和 IE7 的标准模式中的行内元素上却不行，设置 'display:inline-block' 才可以。

其中通过display:inline-block或min-width:0或min-height:0将不可逆地启用hasLayout特性。而在没有其他属性启用hasLayout时，可通过以下方式关闭hasLayout

max-width, max-height (设为 "none")(在IE7中)
position (设为 "static")
float (设为 "none")
overflow (设为 "visible") (在IE7中)
zoom (设为 "normal")
writing-mode (从 "tb-rl" 设为 "lr-t")

로그인 후 복사

而产生新BFC的CSS属性

position:absolute/fixed
float:left/right
display:inline-block/table-cell/table-caption/flex/inline-flex
overflow:(除visible外任意值)

로그인 후 복사

可以看到导致产生新BFC的方式和触发hasLayout==true

이 시점에서 우리는 hasLayout을 이해하려면 BFC를 이해해야 한다는 것을 이해해야 합니다. 따라서 여기에서 CSS Magic Hall: Reunderstanding Box Model, IFC, BFC and Collapsing margins

Default `hasLayout==true를 참조할 수 있습니다. code> 요소`

rrreee

`hasLayout==true`

rrreeeIE7을 트리거하는 방법에는 몇 가지 추가 속성도 있습니다( (불완전한 목록)은 hasLayout을 트리거할 수 있습니다:

IE6의 이전 버전(IE6 및 모든 후속 버전의 혼합 모드 포함, 실제로 이 혼합 모드는 렌더링 측면에서 IE 5.5와 동일함) 'width'를 설정하여 모든 요소 또는 '높이'(자동 아님)는 hasLayout을 트리거할 수 있지만 IE6 및 IE7의 표준 모드에서는 'display:inline-block'을 설정해야만 인라인 요소에서 작동하지 않습니다.

hasLayout 기능은 display:inline-block, min-width:0 또는 min-height:0을 통해 되돌릴 수 없게 활성화됩니다. hasLayout을 활성화하는 다른 속성이 없으면 hasLayout
rrreee
을 끄고 다음 방법으로 새 BFC의 CSS 속성을 생성할 수 있습니다
새 BFC를 생성하는 방법과 트리거를 볼 수 있습니다 hasLayout==true 방법이 완전히 겹치지는 않습니다. 따라서 hasLayout==true로 인해 발생하는 문제는 부적절하거나 예상치 못한 곳에서 새로운 BFC가 생성되어 발생하는 것으로 크게 이해할 수 있습니다.
어떻게 호환되나요?

위 문제는 요소가 이전 버전의 IE에서 hasLayout을 트리거하고 다른 브라우저에서 블록 서식 컨텍스트를 생성하는 경우에만 피할 수 있습니다. 즉, 위의 두 가지를 모두 활성화하여 브라우저 간 호환성을 보장하거나 반대로 두 가지를 모두 비활성화합니다.

요소는 블록 형식화 컨텍스트를 생성하고 hasLayout을 트리거합니다.

1.1 hasLayout을 트리거하는 요소의 경우 CSS를 통해 설정하여 블록 형식화 컨텍스트를 생성합니다.

1.2 블록 형식화 컨텍스트를 생성하지만 Set '를 통해 요소에 대해 hasLayout을 트리거하지 않습니다. Zoom:1'을 선택하여 hasLayout을 트리거합니다.

요소는 hasLayout을 트리거하지 않으며 블록 서식 컨텍스트를 생성하지 않습니다. 🎜🎜🎜🎜요약🎜🎜더 이상 IE5.5/6/7에 적응할 필요는 없지만 hasLayout을 이해하는 것은 여전히 필요합니다. 사실 BFC를 다른 각도에서 배우는 것으로 이해될 수도 있어요! 🎜독창성을 존중하고 재인쇄 출처를 표시해 주세요: http://www.cnblogs.com/fsjohnhuang/p/5291166.html Fatty john^_^🎜🎜감사합니다🎜🎜BFC와 ie의 고유 속성 hasLayout🎜RM8002에 대해 이야기해 주세요. : 동시에 IE6 IE7 IE8(Q)에서 hasLayout을 실행하고 다른 브라우저에서 Block Formatting Context를 생성하는 요소는 각 브라우저에서 다르게 동작합니다🎜

위 내용은 CSS Magic Hall: HasLayout은 다음과 같습니다!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!