CSS 开发技巧分享

Question

关于 Link

类型

1. 加载 css
2. 加载 favicon

加载问题

1. link 加载 css，不影响 DOM 解析，影响 DOM 渲染
2. 阻塞其之后的<script>标签的执行
3. script 标签既阻塞 DOM 解析，又阻塞 DOM 渲染

实现换肤效果

HTML 通过 link 加载 CSS， 当 link 标签的 rel 属性为 alternative，且 title 属性存在时，该样式会加载但不渲染。当我们控制 js 将该标签的 disabled 设为 false 时，该 link 标签引用的 CSS 就会进行渲染，可以通过这个特性实现换肤效果。

优点：

1. 兼容性好
2. 语义好
3. 性能好，秒渲染

参考资料：

1. https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types
2. 张鑫旭的视频 https://www.bilibili.com/video/BV1kU4y1X7a8?spm_id_from=333.851.dynamic.content.click

设置宽高比

CSS 设置宽高比的三种方式：

aspect-ratio

aspect-ratio: 16 / 9;

存在的问题： 兼容性较低， https://caniuse.com/?search=aspect-ration

padding-top

将 height 设为 0，然后将 padding-top 设为纵横比即可

padding-top: calc(768 / 1024 * 100%);
height: 0;

原理很简单，padding-top 的 100%百分比是根据宽度来的，这里乘以纵横比，就得到了高度。

参考链接： https://css-tricks.com/aspect-ratio-boxes/

存在的问题： 由于 height 为 0， 内容最好还是嵌套一层比较好

CSS 变量

--width: 100px;
width: var(--width);
height: calc(var(--width) * 1.25);

总结： 第一种方法是新的标准，第二，三种兼容性好

CSS 样式 优先级

1. !important
2. 行内样式
3. id
4. class,属性，伪类
5. tag,伪元素

通配符，关系选择符号（+，>, ~ , ， ）和 :not 不会影响优先级

除了上述的规则外，如果两个样式的优先级一样，则根据在源码的位置来确定，后面的优先级高

关于 overflow

overflow 是编码 CSS 时比较常用的属性。我们经常用来处理内容和容器之间的关系

属性值

hidden

内容超出容器后会进行截取，用户无法看到超出容器的内容，但是通过设置 scrollTop 可以看到内容

visible

内容超出容器后可以被看到

auto

内容未超出容器时，表现为 visible。超出后表现为 scroll

scroll

内容超出容器后，表现为滚动查看

clip

和 hidden 类型，但是对内容是直接截取，无法通过 JS 调整 scrollTop 查看内容

注意点

1. 一般设置 overflow 时，容器尺寸要有最大值，否则无法实现语法效果
2. 容器设置 overflow: auto 时，内容进行滚动，当子项存在绝对定位时显示会有问题。最好的使用就是将绝对定位的子项抽离处理和当前容器平级，避免显示异常
3. 与 flex: 1 结合使用 overflow: hidden,可以防止 flex 子项膨胀影响其他布局
4. 对 body 设置 overflow: auto 时，必须也要对 html 进行设置 overflow:auto , 才能起作用

BFC

BFC（块级格式化上下文）是 CSS 中的一种布局模式，用于控制块级元素的布局和相互之间的影响。具有 BFC 属性的元素会在垂直方向上形成一个独立的渲染区域，不受外部元素的影响

可以通过以下方式创建 BFC：

将元素设置为浮动（float）
将元素设置为绝对定位（position: absolute/fixed）
将元素的 display 属性设置为 inline-block、table-cell 等
在元素上应用 overflow:hidden、scroll、auto 等属性
常见应用场景：

清除浮动：父元素使用 overflow:hidden 使其成为 BFC，从而清除子元素浮动带来的影响；
避免 margin 折叠：位于同一 BFC 中的两个元素的 margin 会产生折叠，因此可以使用 BFC 分隔它们，避免这种情况；
自适应两列布局：将左侧列设置为一个 BFC，右侧列在流动时就会自然地占据剩余的空间。

杂记

移动端点击会有透明的情况

-webkit-tap-highlight-color: transparent;

万能适配字体

font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Microsoft YaHei', 'Arial', '黑体', '宋体', sans-serif;