-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
CSS 技巧 #11
Comments
CSS 设置宽高比的三种方式:
aspect-ratio: 16 / 9; 存在的问题: 兼容性较低,https://caniuse.com/?search=aspect-ration
将height设为0,然后将padding-top设为纵横比即可
原理很简单,padding-top 的100%百分比是根据宽度来的,这里乘以纵横比,就得到了高度。 参考链接: https://css-tricks.com/aspect-ratio-boxes/ 存在的问题: 由于height为0, 内容最好还是嵌套一层比较好
--width: 100px;
width: var(--width);
height: calc(var(--width) * 1.25); 总结: 第一种方法是新的标准,第二,三种兼容性好 |
CSS 样式 优先级
通配符,关系选择符号(+,>, ~ , , )和 :not 不会影响优先级 除了上述的规则外,如果两个样式的优先级一样,则根据在源码的位置来确定,后面的优先级高 |
关于 overflow前言overflow 是编码 CSS 时比较常用的属性。我们经常用来处理内容和容器之间的关系 属性值hidden内容超出容器后会进行截取,用户无法看到超出容器的内容,但是通过设置scrollTop 可以看到内容 visible内容超出容器后可以被看到 auto内容未超出容器时,表现为visible。超出后表现为 scroll scroll内容超出容器后,表现为滚动查看 clip和hidden 类型,但是对内容是直接截取,无法通过JS调整scrollTop 查看内容 注意点
|
BFCBFC(块级格式化上下文)是CSS中的一种布局模式,用于控制块级元素的布局和相互之间的影响。具有BFC属性的元素会在垂直方向上形成一个独立的渲染区域,不受外部元素的影响 可以通过以下方式创建BFC: 将元素设置为浮动(float) 清除浮动:父元素使用overflow:hidden使其成为BFC,从而清除子元素浮动带来的影响; |
杂记移动端点击会有透明的情况-webkit-tap-highlight-color:transparent; 万能适配字体 font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Microsoft YaHei', 'Arial', '黑体', '宋体', sans-serif; |
关于Link
类型
加载问题
实现换肤效果
HTML 通过 link 加载 CSS, 当 link 标签的 rel 属性为 alternative ,且 title 属性存在时,该样式会加载但不渲染。
当我们控制js将该标签的 disabled 设为 false 时,该 link 标签引用的 CSS 就会进行渲染,可以通过这个特性实现换肤效果。
优点:
参考资料:
The text was updated successfully, but these errors were encountered: