随笔分类 - css
摘要：最近接到了个需求，说是要把页面做成可自定义主题色，通过sdk来获取色值，然后前端来展示不同的主题色，这样不同的商家就可以配置不同的颜色了。 以前没遇到过，此次遇到了研究下，特此简单记录如下。 这里以.vue单文件组件，css写法为例，没有用到css预处理器。 在data函数中定义色值。如 myCol
阅读全文
摘要：以前在写网页的时候，总是使用浏览器默认的字体，因此从未使用过@font-face，然而，最近在做官网的时候，UI规定了字体，要在所有浏览器下都展现同一效果。多番查询下，发现@font-face用起来是比较容易的。 首先我们在使用某一特定字体的时候，需要先下载字体的源文件，例如方正北魏楷书简体（FZB
阅读全文
摘要：今天在改以以前人家写的网页的样式的时候，碰到这个选择器，‘~’，当时我是懵逼的，傻傻分不清 ‘+’ 跟 ‘~’的区别，虽然我知道他们都是兄弟选择器。 后来网上查了下，也许是我查找的方式不对，没有找到我想要的答案，于是私下拿这两个选择器来测试了一下。发现原来是这样的。 先来代码说话： （1）、‘~’选
阅读全文
摘要：今天无意中碰到了外边距合并的问题，于是便研究了一下。这里做个笔记。 所谓外边距合并，指的是当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 例如，这里有这样两个块元素： 这里给的样式是： 先来看一下效果： 意料之中的，然后给.box1一个向
阅读全文
摘要：径向渐变由它的中心定义。可以指定渐变的中心、形状（原型或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。 语法：background: radial-gradient
阅读全文
摘要：css3定义了两种类型的渐变，即线性渐变和径向渐变。这里我要说的是线性渐变。 为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。 语法：background: linear-gradient(direction,
阅读全文
摘要：em 的实际大小是相对于其上下文的字体大小而言的。如果我们给<body>标签设置文字大小为 100%，给其他文字都使用相对单位 em，那这些文字都会受body 上的初始声明的影响。这样做的好处就是，如果在完成了所有文字排版后，客户又提出将页面文字统一放大一点，我们就可以只修改 body 的文字大小，
阅读全文
摘要：之前也用到过nth-child，只是当时理解的不够透彻。今天回过头去看这个知识点时，发现了一个易错点。 浏览器支持情况： 所有主流浏览器都支持nth-child()选择器，除了IE8及更早的版本。 下面还是简单说一下它的用法吧： nth-child(n):该选择器匹配属于父元素的第n个子元素，不论元
阅读全文
摘要：css隐藏内容的方法有三种：即display:none、visibility:hidden、overflow:hidden。 1.display:none;的缺陷： 搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略 屏幕阅读器（是为视觉上有障碍的人设计的读取屏幕内容的程序）会忽略被隐藏的文字。 2.
阅读全文
摘要：今天自己写css样式时，其中用到了<ul>标签，设置了一系列效果后运行，发现位置与设置有出入。chrome上打开检查项，发现<ul>标签的styles底部多了以下一段： ul, menu, dir { ul, menu, dir { display: block; list-style-type:
阅读全文
