css
文章平均质量分 93
巴拉拉L
这个作者很懒,什么都没留下…
展开
-
【css】移动端开发中,字体/字体图标垂直居中问题
前情提要使用插件,自动将px转rem,所以开发中都是使用px;在移动端网页开发过程中,写了一个类似tag(定高)的东西,但在一些设备上字体和字体图标没有垂直居中;字体存在一个line-height,不等于尝试了以下几种方法:设置字体line-height为tag高度,问题:在一些设备上,由于字体的font-size最小为12px,而line-height并没有最小的限制。×给字体加行高,给tag加padding的方式。 ×设置tag的高度,再设置display: inline-flex;原创 2020-08-12 18:52:26 · 1224 阅读 · 0 评论 -
【CSS】css变量的使用
一、变量声明全局变量:root选择器能让我们选择DOM树里的最顶级的元素,也就是文档树。所以,这样定义的变量,也就相当于全局变量了。:root{ --primary-color: #f2f2f2;}局部变量b与em为兄弟节点,在b定义--boldsize变量,对em元素不生效。b{ color: var(--primary-color); --boldsize: 30...原创 2018-11-20 22:18:41 · 183 阅读 · 0 评论 -
【css】关于css3的多列布局出现错乱问题
一开始给外部的container设置了column-count:2;当里面的每个item是偶数个时,布局是正常显示的;而当我们设置了奇数个item时,会出现下图的错乱布局。在item里面设置了以下两个属性之后 height: 100%; overflow: auto;布局就恢复到我们原本期望的样子了。...原创 2018-05-05 18:18:49 · 2408 阅读 · 1 评论 -
【SVG&requestAnimationFrame】圆环增长和数字增长
一、前言圆环和数字增长的场景我们经常能见到,下面先来看一下效果图:从初始值350增长到750的一个过程,其中圆环增长和数字增长都是1s。二、实现过程Code Of HTML从如下html代码中可以看出,svg中画了两个圆,不填充,但都进行了描边。第一个<circle>是较浅的背景色;第二个<circle>是较深颜色,记录圆环增长的路径,并且可以看到将str...原创 2019-07-05 17:24:00 · 444 阅读 · 0 评论 -
【CSS】结合自我理解翻译《6 Methods For Vertical Centering With CSS》
前言本文根据《6 Methods For Vertical Centering With CSS》这篇文章结合自己的理解翻译而来,若有解释不恰当或不合理的地方希望能不吝赐教。垂直居中的六种方法(2-7):(1)vertical-align(2)line-height(3)CSS表格方法(4)绝对定位和负边距(5)绝对定位和拉伸(6)大小相等的上padding和下padding(7...原创 2019-09-14 22:56:49 · 137 阅读 · 0 评论