经常在实践的工作中会发现css有些奇怪的bug , 具体是什么原因也未可知 , 所以我对这些问题进行了一些总结和归档 , 方便查看 , 此文档会持续更新 ...
①在给文字元素设置宽度的时候,经常我们需要适应盒子的宽度;
min-content最小的不可分割的字符的宽度;
max-content里面文字的宽度刚好卡住元素宽度(可以溢出盒子一直不换行);
width: max-content;
width: min-content;
②彻底全面解决icon和文字对齐的bug
在有文字和图标对齐的时候 , 时常会发现图标很难和文字对齐 , 图标设置:
height: 1em;
vertical-align: -0.15em;
③css的高度问题
css中的高度时常会产生一些悖论 , 譬如 , 在父子都没有设置高度的情况下 , 我们希望 , 子元素是父元素的一半 , 给子元素设置50% , 这时候会发现是没有生效的 , 但是我们设置完 "子绝父相" , 就会生效了 .
④100%和100vw
给整个页面设置宽度的时候 , 在Windows系统中会发现浏览器使用100vw在计算宽度的时候把进度条的宽度也算进了 , 所以会出现横向的进度条 , 这时候可以改成100%或者是overflow-x: hidden;
⑤如何固定元素的宽高比例呢 , 有时候我们需要在css中固定元素的宽高比 , 譬如写一个动态宽高的正方形 , 较为麻烦 , 但是有一个新的属性 , 可以完美解决这个问题:
aspect-ratio: 1/1;
并且该属性的兼容性非常好 , 除了IE都兼容 , 同时几乎支持所有的宽高比例 , 小数也可以计算出来.
⑥如何不使用js修改hover之后的图片呢 , 在实际项目中经常会遇到鼠标悬停修改图片的情况,其实使用css一行代码就可以直接解决 , 首先给需要hover的图片设置类名
.img_icon:hover{
content: url(https://api.iconify.design/simple-line-icons:plane.svg?color=%23888888);
}
⑦刚说完了hover的使用技巧 , 实际上在css中还有一个非常取巧的伪类选择器 , 就是:focus-within , 可以在元素聚焦的时候修改样式 , 例如掘金的登录页面就是使用这个做的 , 非常方便:
.input-box:focus-within{
background-color: #39a578;
}
⑧一行代码搞定黑暗模式 , 现在的手机和电脑设备都支持暗夜模式了, 使用@media就可以一键解决这个问题了.
@media screen and (prefers-color-scheme:dark){
background-color:#202124;
color:#eee;
}
