该浏览器不支持canvas

随笔分类 -  CSS

uni-app父组件使用flex，子组件width使用rpx出现bug
摘要：uni-app父组件使用flex，子组件width使用rpx会出现bug，该bug会直接导致1rpx = 0.5px，只能通过在子组件中使用flex： 1来解决 阅读全文
posted @ 2021-05-05 00:02 真是啰嗦 阅读(439) 评论(0) 推荐(0)
CSS隐藏滚动条
摘要：直接放在对应css块里：scrollbar-width: none; /* firefox */-ms-overflow-style: none; /* IE 10+ */ 伪类：/* Chrome Safari */::-webkit-scrollbar{ display: none;} 阅读全文
posted @ 2020-12-19 00:05 真是啰嗦 阅读(141) 评论(0) 推荐(0)
Transform 对元素渲染的影响
摘要：昨天偶然看到一道面试题： 讲讲child1,child3的变化，为什么？ <div> <div class='child1'></div> <div class='child2'></div> <div class='child3'></div> </div> .child2 { transform 阅读全文
posted @ 2020-03-14 11:20 真是啰嗦 阅读(1074) 评论(0) 推荐(0)
冲刺flex布局
摘要：布局的传统解决方案基于盒子模型，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。在目前主流的移动端页面中，使用 flex 布局能更好地完成需求，因此 flex 布局的知识是必须要掌握的。 <style type= 阅读全文
posted @ 2020-03-13 16:00 真是啰嗦 阅读(119) 评论(0) 推荐(0)
优化提高CSS性能的方法有哪些？
摘要：避免过度约束 避免后代选择符 避免链式选择符 使用紧凑的语法 避免不必要的命名空间 避免不必要的重复 最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么 避免！important，可以选择其他选择器 尽可能的精简规则，你可以合并不同类里的重复规则 修复解析错误 避免使用多类选择符 移 阅读全文
posted @ 2020-03-10 03:52 真是啰嗦 阅读(245) 评论(0) 推荐(0)
CSS实现太极效果
摘要：这个伪元素的位置对齐还妹搞明白 需要再研究研究 阅读全文
posted @ 2019-08-29 10:28 真是啰嗦 阅读(428) 评论(0) 推荐(0)
圣杯布局和双飞翼布局
摘要：区别就是一个采用大包三个小，用了相对布局，另一个大包中间的一个，不需要使用定位，更加简洁，且允许的页面最小宽度通常比圣杯布局更小。 圣杯布局： 双飞翼： 阅读全文
posted @ 2019-08-27 21:51 真是啰嗦 阅读(154) 评论(0) 推荐(0)
CSS的水平居中和垂直居中
摘要：水平居中如果不太熟悉盒子模型的话属实不太好理解，其实就是控制其他属性来让border之内的内容被控制在父容器中间就行了，最经典的就是使用{margin： 0 auto}了，控制其上下外边框为0，左右两边自动根据父容器的宽度调整为相同的数值把内容卡在中间就可以了。 垂直对齐内容则有挺多办法的，有通过使 阅读全文
posted @ 2019-07-18 14:50 真是啰嗦 阅读(134) 评论(0) 推荐(1)
快速拿下CSS盒子模型
摘要：下面的图片就是Chrome浏览器审查元素里的盒子情况展示，我们可以看到一个容器由4个颜色代表的内容组成：内容(content)、填充(padding)、边框(border)、边界(margin)，在这张图上由内向外依次表示。 盒子模型有两种： 1.标准盒模型，即该容器的width和height两个属 阅读全文
posted @ 2019-07-18 13:55 真是啰嗦 阅读(255) 评论(0) 推荐(0)