![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
青菜小王子
我向往自由
展开
-
【flex:1】、【flex:0】、【flex:auto】、【flex:none】
flex:1 flex-grow: 1; flex-shrink: 1; flex-basis: 0%; flex:0 flex-grow: 0; flex-shrink: 1; flex-basis: 0%; flex:auto flex-grow: 1; flex-shrink: 1; flex-basis: auto; flex:none flex-grow: 0; flex-shrink: 0; flex-basis: auto; 详细参考flex属性-flex:1到底是什么 ...原创 2021-02-25 23:04:30 · 322 阅读 · 0 评论 -
《Web性能优化》读书笔记
原创 2021-01-17 12:03:55 · 150 阅读 · 0 评论 -
解决Mac深色模式下文字颜色问题
prefers-color-scheme CSS 媒体特性用于检测用户是否有将系统的主题色设置为亮色或者暗色。 body { color: #ddd; } @media (prefers-color-scheme: dark) { body { color: #fff; } } 参考MDN Web Docs原创 2020-10-29 10:01:37 · 1000 阅读 · 0 评论 -
利用css的伪元素before、after实现蒸锅
阅读《CSS3艺术》练习 <figure class="steamer"> <div class='lid'></div> <div class='pot'></div> </figure> /*设置全局样式*/ body { display: flex; align-item: center; justify-content: center; background-color: pink; height原创 2020-08-02 16:34:04 · 171 阅读 · 0 评论 -
Less基本用法
变量 @nice-blue: #5b83ad; @light-blue: @nice-blue + #111; #header { background-color: @nice-blue; color: @light-blue; } 结果为: #header { background-color: #5b83ad; color: #6c94be; } Mixins 使用类选择器,ID选择器混入 .a, #b { color: red; } .mixin-class { .a(原创 2020-07-28 16:54:47 · 206 阅读 · 0 评论