CSS Magic Hall: HasLayout은 다음과 같습니다!
- 巴扎黑원래의
- 2017-06-28 11:13:041211검색
머리말
저는 이전 버전의 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
Default hasLayout==true를 참조할 수 있습니다. code> 요소
hasLayout==true를 참조할 수 있습니다. code> 요소
rrreee
hasLayout==true
rrreeeIE7을 트리거하는 방법에는 몇 가지 추가 속성도 있습니다( (불완전한 목록)은 hasLayout을 트리거할 수 있습니다: - rrreee
- IE6의 이전 버전(IE6 및 모든 후속 버전의 혼합 모드 포함, 실제로 이 혼합 모드는 렌더링 측면에서 IE 5.5와 동일함) 'width'를 설정하여 모든 요소 또는 '높이'(자동 아님)는 hasLayout을 트리거할 수 있지만 IE6 및 IE7의 표준 모드에서는 'display:inline-block'을 설정해야만 인라인 요소에서 작동하지 않습니다.
을 끄고 다음 방법으로 새 BFC의 CSS 속성을 생성할 수 있습니다
hasLayout 기능은display:inline-block,min-width:0또는min-height:0을 통해 되돌릴 수 없게 활성화됩니다. hasLayout을 활성화하는 다른 속성이 없으면 hasLayout
rrreee rrreee - 새 BFC를 생성하는 방법과 트리거를 볼 수 있습니다
hasLayout==true방법이 완전히 겹치지는 않습니다. 따라서 hasLayout==true로 인해 발생하는 문제는 부적절하거나 예상치 못한 곳에서 새로운 BFC가 생성되어 발생하는 것으로 크게 이해할 수 있습니다. 어떻게 호환되나요?
요소는 블록 형식화 컨텍스트를 생성하고 hasLayout을 트리거합니다.
1.2 블록 형식화 컨텍스트를 생성하지만 Set '를 통해 요소에 대해 hasLayout을 트리거하지 않습니다. Zoom:1'을 선택하여 hasLayout을 트리거합니다.
위 내용은 CSS Magic Hall: HasLayout은 다음과 같습니다!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!