CSS 技巧

[vivipure]

关于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)

[vivipure]

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

1. aspect-ratio

aspect-ratio: 16 / 9;

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

2. 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， 内容最好还是嵌套一层比较好

3. CSS变量

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

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

[vivipure]

CSS 样式 优先级

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

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

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

[vivipure]

关于 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 , 才能起作用

[vivipure]

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，右侧列在流动时就会自然地占据剩余的空间。

[vivipure]

杂记

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

-webkit-tap-highlight-color:transparent;

万能适配字体

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