有趣的CSS

发表于 | 分类于 |
字数统计: 2.2k | 阅读时长 ≈ 8

​ 在经历几次面试之后，我发现了我的一个最大短板—CSS。只要是问到CSS相关的东西，我都不能说好，🔒所以周末抽空看了看《CSS权威指南》，《CSS揭秘》。收获还是很大的，同时发现了学习CSS的乐趣。还有感谢这周面我的所有面试官了，面试是真的会使人进步的（前提是自己每次结束之后，会去复盘，不断学习）。有的面试结束之后，结果已经不重要了，整个过程都已经学到了不少东西，你会感觉这场面试非常有意义。

​ 进入正文，《CSS权威指南》里面的内容说的很细，会说到CSS的每一个属性以及取值（看起来可能会有点枯燥，动手敲敲，再来一瓶可乐，就会快乐很多）。《CSS揭秘》适合有基础的开发者。有趣的是《CSS揭秘》完全用H5写成，书中看到的全部东西都是由CSS渲染出来的HTML。图片是用SVG生成的 或者由SCSS函数生成的SVG data URI 。数学公式是用LaTeX中写成的，然后转化为MathML。书中的所有页码 章节号等都是纯粹的CSS计数器生成的。

媒体查询与特性查询

  • 媒体查询：定义浏览器在何种媒体环境中使用指定的样式表

    • 用法：

      • link,style元素的media属性
      • @import，@media声明的媒体描述符部分

    • 类型：all,print,screen

    • 描述符：and,not,only

      • only: 保证向后兼容

        @import url(new.css) only all在支持媒体查询的浏览器中，only会被忽略，样式表会应用到文档中。不支持媒体查询的浏览器中，为only all,这是无效的。

        262.ecma-international.org

  • 特性查询：根据是否支持特定的CSS属性及其值来应用一段样式

    • 用法：

      1
      2
      3
      4
      5
      @supports (color: black){
          body {color: black;}
          h1 {color: purple}
      }
      /*要是能识别处理color:black这样的属性和值组合，那就应用这段样式；否则跳过*/

选择器

优先级：!important > 内联 > id > class > 标签 > 通配符 > 继承 > 默认

  • 根据属性选择

    1
    2
    3
    4
    [foo |= "bar"]  选择元素有foo属性，并且其值以bar-开头或者就是bar
    [foo ~= "bar"]  选择元素有foo属性，并且其值是包含bar这个词的一组词。**以空白分割的词,比如：bar bb**
    [foo *= "bar"]  选择元素有foo属性，并且其值包含子串bar。比如**bard**
    ^开头 $结束

    • CSS Selectors Level 4 为属性选择符引入一个不区分大小写的选项。在结束方框前写i

      比如：一个执行PDF文档的链接，不知道后缀是.pdf还是.Pdf。。。。

      a[href$='.PDF' i]

  • 根据DOM树关系选择

    • 选择子元素：h1 > strong h1下的strong元素
    • 紧邻同胞元素：h1 + p 选择紧跟h1后面的p 属于一个父级
      • 注意：使用一个+只能选择紧邻同胞中的第二个元素。比如：一个ol下有3个li,用li+li {font-weight: bold;}只有第二个跟第三个项目会显示粗体。
    • 选择后续同胞：使用~。不要求紧邻

  • 伪类 ：

    为不一定存在的结构指定样式，或者为某些元素（甚至文档本身）的特定状态赋予幽灵类

    • 可以拼接：a:link:hover:lang(de) {color: gray;} 把鼠标悬停在德语下的未访问链接显示为灰

    • 结构伪类：

      有趣的故事：第一个孩子出生，用#my:first-child 对吗 —-》 不对 ，这样选择的是自己，意思是自己是父母的第一个孩子。

      应该写为`#my > :first-child` 这样写 被选择的对象才是第一个孩子
      • 选择根元素用body 和 :root 的区别
      • :empty是唯一一个在匹配时考虑文本节点的CSS选择符。Selectors Level 3 中其他选择符只考虑元素，完全忽略文本节点
      • 选择第一个或最后一个 :first-child :last-child
      • 选择第一个或最后一个某种元素 td:first-of-type 表示不管前面有没有表头，选择一行中的第一个单元格
      • 第n个子元素 :nth-child(n) 如果更新了DOM,添加或删除了节点，仍可以匹配到更新后的DOM
      • 动态伪类 推荐顺序：link - visited - focus - hover - active active:按下的过程

  • 伪元素 ::

    • ::first-letter和::first-line首字母和首行 只能应用到块级元素上，比如标题或段落，不能应用到行内元素上 比如超链接
    • ::before ::after 前插和后插 比如：body::after {content: "The End."} 文档末尾加上结束语

特指度，继承，层叠

  • 特指度：优先级

    • id: 0100
    • 类属性，伪类 ：0010
    • 元素，伪元素：0001

  • 继承

    向下传播的过程，类似于事件委托。在HTML中向上传播规则有个例外，应用到body元素上的样式会传到html(只限于html没有设置)

    继承是CSS的根基之一，通常无需刻意考虑，但有例外

    -  多数盒模型 border,padding,margin
-  继承没有特指度

  • 层叠

    • 权值相同时，渲染哪一个？看来源

      • 1.读者提供的样式中以!important标记的声明
      • 2.创作人员编写的样式中以!important标记的声明
      • 3.创作人员编写的常规声明
      • 4.读者提供的常规声明
      • 5.用户代理的默认声明

      权值来源都相同，看前后位置

值与单位

  • 全局关键字：

    • inherit：将元素的某个属性的值设为与父元素一样
    • initial：将属性值设为预定义的初始值
    • unset：前两个的替身:smiley_cat: 对于继承属性来说，unset与inherit作用一样；对于不继承属性来说，与initial作用一样
    • all：除了direction和unicode-bidi之外的所有属性。取值：inherit | initial | unset

  • 图像

    在响应式布局中，通常会用相对于文本的尺寸标注图像的 大小，而不关心图像中究竟有多少像素。这就要去依赖用户代理的图像缩放技术。现在已经成熟，被矢量图像（如：SVG）严重依赖

    在高级的用户代理中，<image>表示下面三种值中的一个：

    • <url> 指向外部资源的URL标识符

    • <image-set> 一系列图像，根据值中的条件选择

      image-set() 可以指定用于桌面布局的大图，以及用于移动布局的小图。类似picture元素的srcset属性，所有浏览器都支持srcset,只有Safari,Chrome,桌面Opera支持image-set

    • <gradient> 线性渐变或径向渐变图像 可以是单个 也可以是重复

  • 绝对长度单位：in,cm,mm,pt(一个标准印刷度量单位),pc（1pc = 12pt）,px

  • 相对长度单位：

    • em: 1em = font-size 相对于父元素的字号而言
    • rem: 对于根元素来说 相当于默认字号
    • ch: :zap:CSS3引入。表示近距，比如定义为所用字体字形本身的宽度加上侧边距（无论正负），也有高度的概念
    • vw,vh,vmin,vmax

  • cal(): 计算

    • +、- ： 两侧使用相同的单位类型,或者是和。5em+20px是有效
    • *：两个值必须有一个是
    • / : 右边为

  • attr(): 属性值

    1
    2
    3
    4
    5
    6
    7
    8
    <style>
        p::before {content: "["attr(id)"]";}
    </style>
    <p id="5">
        点16了
    </p>

    [5]点16了

  • 颜色：具名，RGB，RGBa，十六进制，HSL, HSLa

    2个特殊关键字允许在任何使用颜色值的地方使用：transparent（完全透明）和currentColor（当前元素color属性计算得到的值）

  • 角度：deg(度数),grad(百分度),rad(弧度)，turn（圈数）

  • 自定义标识符：常用于关于团队页面 用不同颜色表示人名的时候。以–开头，区分大小写，以val()调用，作用域在一定范围之内

  • 字体：@font-face去引入要用的字体，惰性加载

    1
    2
    3
    4
    @font-face {
        font-family: "SwitzeraADF";
        src: url("SwitzeraADF-Regular.otf") format("opentype")
    }

    format() 告诉用户代理所用字体是什么格式，:zap: 让用户代理跳过不支持的字体格式，减少带宽用量，提升加载速度

​

盒模型

7个横向属性之和始终等于父元素的width。当子元素有设负值 就会超出父元素，并没有违背规范，是利用了语义。

外边距重叠问题： 都是正值，取最大的值。一正一负，正负相加。都是负值，取绝对值最大的。

​