清澈的水果糖
前端摸鱼工程师
|
提桶跑路大本营
前端小萌新
获得徽章 8
- #每天一个知识点# 编写高效的 CSS 应该注意什么？
首先，浏览器从最右边的选择器，即关键选择器（key selector），向左依次匹配。根据关键选择器，浏览器从 DOM 中筛选出元素，然后向上遍历被选元素的父元素，判断是否匹配。选择器匹配语句链越短，浏览器的匹配速度越快。避免使用标签和通用选择器作为关键选择器，因为它们会匹配大量的元素，浏览器必须要进行大量的工作，去判断这些元素的父元素们是否匹配。
BEM (Block Element Modifier)原则上建议为独立的 CSS 类命名，并且在需要层级关系时，将关系也体现在命名中，这自然会使选择器高效且易于覆盖。 搞清楚哪些 CSS 属性会触发重新布局（reflow）、重绘（repaint）和合成（compositing）。在写样式时，避免触发重新布局的可能。展开评论点赞 - #每天一个知识点# 块格式化上下文（Block Formatting Context，BFC）是Web页面布局中的一种 CSS 渲染模型，用于控制块级元素的布局和定位。BFC 形成了一个独立的渲染环境，其中的元素按照一定的规则进行排列和定位。
以下是关于块格式化上下文的要点：
BFC 的形成条件：BFC 可以通过以下方式形成：
根元素（HTML 元素）是一个 BFC。
浮动元素（float 不是 none）。
绝对定位元素（position 为 absolute 或 fixed）。
行内块元素（display 为 inline-block）。
弹性盒子容器（display 为 flex 或 inline-flex）。
网格容器（display 为 grid 或 inline-grid）。
overflow 属性值不为 visible 的块级元素（overflow 为 auto、scroll 或 hidden）。
BFC 的工作原理：BFC 形成了一个独立的渲染环境，其中的元素按照一定的规则进行布局和定位。BFC 的工作原理如下：
内部的块级元素会在垂直方向上一个接一个地排列，从上到下。
垂直方向上的边距（margin）会发生重叠，但是与其他 BFC 中的元素的边距不会重叠。
BFC 中的元素不会与浮动元素重叠，而是会自动环绕浮动元素。
BFC 中的元素会包含其所有的子元素，即使子元素设置了浮动或绝对定位。
BFC 中的元素在计算高度时，会包括其所有的子元素。
BFC 的应用和作用：
清除浮动：通过将包含浮动元素的容器设为 BFC，可以清除浮动带来的布局问题。
避免边距重叠：相邻的两个元素分别位于不同的 BFC 中，可以避免它们的边距重叠。
创建自适应的两栏布局：通过将左侧栏设置为浮动或绝对定位，将右侧栏设为 BFC，可以创建自适应的两栏布局。
阻止文本环绕：将文本包裹在 BFC 中的元素中，可以阻止文本环绕其他元素。
通过使用 BFC，可以更好地控制元素的布局和定位，解决一些常见的布局问题，提升页面的可靠性和可预测性。展开评论点赞
![[大笑]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_55.74ed629.png)