女王控的博客

CSS

30 篇文章

CSS世界强大文本处理能力

line-height 的另外一个朋友 font-size 第 5 章介绍过 line-height 和 vertical-align 的好朋友关系,实际上 font-size 也和 line-height 是好朋友,同样也无处不在,并且纸面上 line-height 的数值属性值和百分比值属性值都是相对于 font-size 计算的,其关系可谓不言而喻。 font-size 和 vertical-align 的隐秘故事 line-height 的部分类别属性值是相对于 font-size… »

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

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

CSS世界流的破坏与保护

魔鬼属性 float float 的本质与特性 浮动的本质就是为了实现文字环绕效果。 包裹性; 块状化并格式化上下文; 破坏文档流; 没有任何 margin 合并; 所谓“包裹性”,由“包裹”和“自适应性”两部分组成。 包裹。假设浮动元素父元素宽度 200px,浮动元素子元素是一个 128px 宽度的图片,则此时浮动元素宽度表现为“包裹”,就是里面图片的宽度 128px,代码如下: 自适应性。如果浮动元素的子元素不只是一张 128px… »

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… »

0%