博主推荐前些天发现了一个巨牛的人工智能学习网站通俗易懂风趣幽默忍不住分享一下给大家。点击跳转到网站 个人简介一个不甘平庸的平凡人️ Node专栏Node.js从入门到精通️ TS知识总结十万字TS知识点总结 你的一键三连是我更新的最大动力❤️ 欢迎私信博主加入前端交流群 目录清除浮动zoom 是什么为什么使用 zoom 什么是 hasLayout 如何触发 hasLayout 为何 zoom 前加 * 前缀 清除浮动前端开发中清除浮动是一种很常见的操作最常用的一种方案如下.clearfix { *zoom: 1; ::after { clear: both; content: .; display: block; font-size: 0; height: 0; visibility: hidden; } }在clearfix类中添加after伪元素并在伪元素中使用clear: both是很常见的一种清除浮动的方法但上面的代码中还有一些额外的操作需要注意为什么content不直接设置为空字符串首先在伪元素中如果没有content属性或者content属性值为none或者normal时伪元素是不会产生的。然而在一些老版本的浏览器中content值为空字符时也不会产生伪元素所以为了兼容性这里是随便设置一个content值然后后面使用font-size: 0;height: 0;visibility: hidden;来消除这个content的影响。为什么clearfix类中还要使用*zoom: 1;这是本篇文章的重点往下看zoom 是什么zoom属性最初只是 IE 浏览器上的私有属性但之后也被一些浏览器所支持支持情况如下zoom属性主要是用于控制元素的缩放比例与transform: scale()类似但它会影响元素的布局大小同样会影响周围元素的布局会触发回流效果如下网上都说这个属性没什么意义但我个人认为它还是有一定的使用场景的如果您正在使用 typora 写 markdown您可以试试插入图片后调整图片大小然后再查看源码您会发现typora 就是使用 zoom 属性来缩放您的图片的为什么使用 zoom 多加一个zoom属性无非就是两点原因一些老版本 IE 浏览器对伪元素或者一些属性的支持情况不太友好导致无法使用伪元素来实现清除伪类。zoom属性可以在老版本 IE 中起到清除浮动的作用。为何zoom可以在老版本 IE 中起到清除浮动的作用这就要说起 IE 中对元素布局具有深远影响的hasLayout属性什么是 hasLayout 绝大部分情况下我们不需要了解 hasLayout 的任何信息但本着提升自己、扩展知识、提升职业素养的想法多了解自己领域内的知识百利而无一害其实在 IE 中hasLayout并不是一个可以被开发者直接控制的 CSS 属性它是 IE 渲染引擎的内部属性主要用来表示元素以何种方式进行渲染。在 IE 中元素主要有两种渲染方式元素负责调整自身以及后代元素的内容的大小和排列此时元素对应的hasLayout属性为true这时可以简单称该元素具有“独立布局”元素依赖父元素来调整其内容的大小和排列此时元素对应的hasLayout属性为false只有一部分元素如body、html(标准模式非怪异模式)、table、img、button、input、iframe等的hasLayout属性默认为true之所以不让所有元素默认都具有“独立布局”的主要原因是“性能和简单性”如果所有元素都有独立布局则会对性能和内存使用产生不利影响。对于hasLayout属性为false的不具有“独立布局”的元素因为受限与父元素在使用时可能会发生一些 BUG。事实上 IE 中很多 CSS 的 BUG 确实是由于这种机制所导致所以大部分 BUG 也都能通过触发hasLayout来解决。如何触发 hasLayout 当一个元素设置了width或者height除auto之外的值时该元素的hasLayout就会变成true如果不想指定元素宽高也可以使用以下方式来触发设置元素为行块盒inline-block设置浮动设置绝对定位writing-mode: tb-rl(tb-rl值目前来说虽已弃用但这里针对的老版本浏览器还都是支持的)设置zoomIE7 中min-height、max-height、min-width、max-width、overflow、固定定位等也都可以触发hasLayout。以上属性最常用的就是使用zoom:1因为它几乎不会产生什么副作用这也是我们使用zoom的原因之一。为何是之一因为还有一个原因早期时它不是有效的 CSS 属性非标准且是 IE 私有的因此其他浏览器会忽略它。但之后这个属性也被 Chrome 、Safari 等其它一些浏览器给支持了现在如果我们不想让除 IE 之外的浏览器识别zoom可以在其前面添加*前缀原因后面说其实看到这您应该可以想到 IE 中的hasLayout与我们当下流行的块级格式化上下文BFC有些许相像它们都是创建一个独立环境来完成布局从而避免影响外界或者被外界影响所以说在 IE 中触发hasLayout就能清除浮动也就很好理解了。为何 zoom 前加 * 前缀 上面已经提到了如果我们不想让除 IE 之外的浏览器识别zoom可以在其前面添加*前缀这是因为只有 IE7 及以下版本的浏览器才支持具有非字母数字下划线前缀的属性现代浏览器是无法识别带这种前缀的属性的并且在 CSS 中直接使用这种前缀时 VS Code 会直接爆红在 less 中写这种前缀则不会爆红浏览器控制台VS Code其实个人感觉现在这个*前缀加不加无所谓因为即使被一些浏览器所识别zoom:1的设置也不会产生什么明显的副作用。不加的话还可以避免在直接写 CSS 时 VSCode 爆红不知各位大佬有何观点参考stackoverflow What is haslayout?The Internet Explorer hasLayout Property如果您有什么建议或者想法欢迎在评论区或者私信交流哦一起学习一起进步加油如果本篇文章对你有所帮助还请客官一件四连❤️ CSS 写个清除浮动，怎么还蹦出个 hasLayout？ *zoom？
博主推荐前些天发现了一个巨牛的人工智能学习网站通俗易懂风趣幽默忍不住分享一下给大家。点击跳转到网站 个人简介一个不甘平庸的平凡人️ Node专栏Node.js从入门到精通️ TS知识总结十万字TS知识点总结 你的一键三连是我更新的最大动力❤️ 欢迎私信博主加入前端交流群 目录清除浮动zoom 是什么为什么使用 zoom 什么是 hasLayout 如何触发 hasLayout 为何 zoom 前加 * 前缀 清除浮动前端开发中清除浮动是一种很常见的操作最常用的一种方案如下.clearfix { *zoom: 1; ::after { clear: both; content: .; display: block; font-size: 0; height: 0; visibility: hidden; } }在clearfix类中添加after伪元素并在伪元素中使用clear: both是很常见的一种清除浮动的方法但上面的代码中还有一些额外的操作需要注意为什么content不直接设置为空字符串首先在伪元素中如果没有content属性或者content属性值为none或者normal时伪元素是不会产生的。然而在一些老版本的浏览器中content值为空字符时也不会产生伪元素所以为了兼容性这里是随便设置一个content值然后后面使用font-size: 0;height: 0;visibility: hidden;来消除这个content的影响。为什么clearfix类中还要使用*zoom: 1;这是本篇文章的重点往下看zoom 是什么zoom属性最初只是 IE 浏览器上的私有属性但之后也被一些浏览器所支持支持情况如下zoom属性主要是用于控制元素的缩放比例与transform: scale()类似但它会影响元素的布局大小同样会影响周围元素的布局会触发回流效果如下网上都说这个属性没什么意义但我个人认为它还是有一定的使用场景的如果您正在使用 typora 写 markdown您可以试试插入图片后调整图片大小然后再查看源码您会发现typora 就是使用 zoom 属性来缩放您的图片的为什么使用 zoom 多加一个zoom属性无非就是两点原因一些老版本 IE 浏览器对伪元素或者一些属性的支持情况不太友好导致无法使用伪元素来实现清除伪类。zoom属性可以在老版本 IE 中起到清除浮动的作用。为何zoom可以在老版本 IE 中起到清除浮动的作用这就要说起 IE 中对元素布局具有深远影响的hasLayout属性什么是 hasLayout 绝大部分情况下我们不需要了解 hasLayout 的任何信息但本着提升自己、扩展知识、提升职业素养的想法多了解自己领域内的知识百利而无一害其实在 IE 中hasLayout并不是一个可以被开发者直接控制的 CSS 属性它是 IE 渲染引擎的内部属性主要用来表示元素以何种方式进行渲染。在 IE 中元素主要有两种渲染方式元素负责调整自身以及后代元素的内容的大小和排列此时元素对应的hasLayout属性为true这时可以简单称该元素具有“独立布局”元素依赖父元素来调整其内容的大小和排列此时元素对应的hasLayout属性为false只有一部分元素如body、html(标准模式非怪异模式)、table、img、button、input、iframe等的hasLayout属性默认为true之所以不让所有元素默认都具有“独立布局”的主要原因是“性能和简单性”如果所有元素都有独立布局则会对性能和内存使用产生不利影响。对于hasLayout属性为false的不具有“独立布局”的元素因为受限与父元素在使用时可能会发生一些 BUG。事实上 IE 中很多 CSS 的 BUG 确实是由于这种机制所导致所以大部分 BUG 也都能通过触发hasLayout来解决。如何触发 hasLayout 当一个元素设置了width或者height除auto之外的值时该元素的hasLayout就会变成true如果不想指定元素宽高也可以使用以下方式来触发设置元素为行块盒inline-block设置浮动设置绝对定位writing-mode: tb-rl(tb-rl值目前来说虽已弃用但这里针对的老版本浏览器还都是支持的)设置zoomIE7 中min-height、max-height、min-width、max-width、overflow、固定定位等也都可以触发hasLayout。以上属性最常用的就是使用zoom:1因为它几乎不会产生什么副作用这也是我们使用zoom的原因之一。为何是之一因为还有一个原因早期时它不是有效的 CSS 属性非标准且是 IE 私有的因此其他浏览器会忽略它。但之后这个属性也被 Chrome 、Safari 等其它一些浏览器给支持了现在如果我们不想让除 IE 之外的浏览器识别zoom可以在其前面添加*前缀原因后面说其实看到这您应该可以想到 IE 中的hasLayout与我们当下流行的块级格式化上下文BFC有些许相像它们都是创建一个独立环境来完成布局从而避免影响外界或者被外界影响所以说在 IE 中触发hasLayout就能清除浮动也就很好理解了。为何 zoom 前加 * 前缀 上面已经提到了如果我们不想让除 IE 之外的浏览器识别zoom可以在其前面添加*前缀这是因为只有 IE7 及以下版本的浏览器才支持具有非字母数字下划线前缀的属性现代浏览器是无法识别带这种前缀的属性的并且在 CSS 中直接使用这种前缀时 VS Code 会直接爆红在 less 中写这种前缀则不会爆红浏览器控制台VS Code其实个人感觉现在这个*前缀加不加无所谓因为即使被一些浏览器所识别zoom:1的设置也不会产生什么明显的副作用。不加的话还可以避免在直接写 CSS 时 VSCode 爆红不知各位大佬有何观点参考stackoverflow What is haslayout?The Internet Explorer hasLayout Property如果您有什么建议或者想法欢迎在评论区或者私信交流哦一起学习一起进步加油如果本篇文章对你有所帮助还请客官一件四连❤️