女王控的博客

CSS知识点

12 篇文章

使用 等空格实现最小成本中文对齐

字符介绍 字符以及HTML实体 描述以及说明 这是我们使用最多的空格,也就是按下space键产生的空格。在HTML中,如果你用空格键产生此空格,空格是不会累加的(只算1个)。要使用html实体表示才可累加。为了便于记忆,我总是把这个空格成为“牛逼(nb)空格(sp – space)”,虽然实际上并不牛逼。该空格占据宽度受字体影响明显而强烈。在inline-block… »

focus-within伪类及其交互应用

了解CSS :focus-within伪类 CSS :focus-within伪类选择器和IE8就开始支持的:focus可以说是近亲,区别在于:focus表示当前元素处于focus状态时候干嘛干嘛,而:focus-within表示当前元素或者当前元素的子元素处于focus状态时候干嘛干嘛。 举个例子: 表示仅仅当 处于focus状态时候, 元素outline出现。换句话说,子元素focus… »

SVG/Canvas中nonzero和evenodd填充规则

填充的两种规则 只要是路径填充,都有两种规则 nonzero 和 evenodd,无论是 SVG 中的路径填充,还是 Canvas 中的路径填充,如果还有其他和路径相关的技术(甚至设计软件),也离不开这两种填充规则。 如果我们用3个点,连成一个三角形,则这两种填充规则没什么区别,如下对比 如果是两个三角形,并且发生重叠,差异就出现了,如下: 交叉点 填充规则的关键,就是确定复杂路径构成的图形,哪些是内部,哪些是外部。内部则填充,外部则透明。 “nonzero… »

CSS scroll-behavior和JS scrollIntoView让页面滚动平滑

假设页面中有下面这一段HTML: 点击“返回顶部”这个文字链接的时候,页面就会“唰”地瞬间定位到浏览器顶部。 浏览器已经开始支持原生平滑滚动定位,CSS scroll-behavior属性和JS scrollIntoView()方法都可以。 CSS scroll-behavior与平滑滚动 scroll-behavior:smooth写在滚动容器元素上,可以让容器(非鼠标手势触发)的滚动变得平滑。 语法 初始值是’auto’。 凡是需要滚动的地方都加一句scroll-behavior… »

去除冗余 – 精简您的CSS样式代码

一些常见不必要CSS样式 与默认CSS样式一致 我们有时候写的CSS样式会与浏览器默认的CSS样式一致,有时候您自己都可能没有意识到。 常见的例子有: width / height 很显然,这段样式是没有必要的,默认的任何块状元素的高度几乎都是auto。 padding 上面有关body,p等标签的样式中有个样式是无效的,与默认值一致的,这个样式就是padding:0,对于body,p,h1~6这些标签,本身的padding值就是0,所以只需要margin:0就可以了。 因为ul,ol… »

0%