谈BFC和haslayout

时间 2019-11-12

标签 bfc haslayout 繁體版

原文原文链接

今天提到BFC和haslayout，就顺带在网上查查资料，总结一下它们。html

CSS2咱们再熟悉不过，固然它里面咱们须要掌握的，就是CSS2的选择器和布局，选择器总共31种。避开这个不说，咱们说布局。编程

布局常常用到的有浮动、定位，固然也须要知道盒子模型，这里的盒子模型不是说就是内边距、外边距、边框等，他们只是其中的一种。浏览器

盒子模型总共有5个：1) BFC；2) haslayout；3) 元素盒；4) EM盒；5) 行盒app

BFC：布局

含义：顾名思义就是Block Formatting Context。spa

怎么触发造成：.net

float 不能设置为 none。
overflow 不能设置为 visible。
display 的值为（table-cell、table-caption、inline-block）。
position 不能设置为 relative 和 static。

haslayout：code

含义：“Layout”是一个 Internet Explorer for Windows的私有概念，它决定了一个元素如何显示以及约束其包含的内容、如何与其余元素交互和创建联系、如何响应和传递应用程序事件、用户事件等。这种渲染特性能够经过某些 CSS 属性被不可逆转地触发。而有些 HTML 元素则默认就具备”layout”。微软的开发者们认为元素都应该能够拥有一个”属性(property)”(这是面向对象编程中的一个概念)，因而他们便使用了 hasLayout，这种渲染特性生效时也就是将 hasLayout 设成了 true 之时orm

由来：不一样于标准属性，也不像某些浏览器的私有 CSS 属性，layout 没法经过某一个 CSS 声明直接设定。也就是说没有”layout属性”这么一个东西，元素要么自己自动拥有 layout，要么借助一些 CSS 声明悄悄地得到 layout。htm

下列元素应该是默认具备 layout 的：

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

做用：

清除浮动；

不和浮动元素重叠（效果同BFC）；

水平两栏自适应排版；

.second-item { overflow: hidden; *zoom: 1;//IE6 }

1. BFC和haslayout
2. BFC 和 haslayout
3. BFC，hasLayout
4. BFC、haslayout
5. 说说bfc 和 HasLayout
6. CSS BFC 和 IE hasLayout
7. 谈谈BFC与ie特有属性hasLayout
8. CSS BFC和IE Haslayout介绍
9. CSS BFC hasLayout模型
10. 关于Block Formatting Context－－BFC和IE的hasLayout
更多相关文章...
• XLink 和 XPointer 语法 - XLink 和 XPointer 教程
• Kotlin 类和对象 - Kotlin 教程
• 漫谈MySQL的锁机制
• Docker容器实战(八) - 漫谈 Kubernetes 的本质