青训营笔记(css)| 青训营笔记

62 阅读1分钟

这是我参与「第四届青训营 」笔记创作活动的第1天

  • 属性选择器(选择所有有这个属性的元素

image-20220730111855083.png 只要元素有disabled这个属性就可以选中

字体

  • 字体是按照字体族的先后顺序来匹配的 英文字体应用的字体族最好放在中文的前面

自定义字体族:

使用@font-face 需要加载(可能会比较慢o

image-20220730120054301.png

  • 行高 没有单位的话,就是当前的font-size为基准1

继承

跟盒子模型相关的属性一般都不能继承,比如height,但是可以使用inherit显式继承

图片.png

这样继承的优先度比较低,可以被覆盖..some-widget就覆盖了继承的box-sizing属性

css求值过程

图片.png

  • 计算值 分析css跟html就能直接能计算得到的
  • formatting 要实际布局才能得到的值 浏览器大小决定了vw vh大小

布局

  • 常规流
    • 行级
    • 块级
    • 表格布局
    • flexbox
    • grid布局
  • 浮动
  • 绝对定位

图片.png

行级包块级 其实是出了两个匿名盒子分别包装 span的字体换行了

grid 网格布局

将一个盒子进行分隔 然后 内部可以使用子元素放在格子里面 有一点像flex布局 但是flex布局是一维的只有主轴和侧轴 但是grid就有很多线,将盒子分成很多的格子 grid可以有一点点像网格图 可以给每一条线标标号

图片.png 通过线的标号来确定哪一条线 参考链接 最强大的 CSS 布局 —— Grid 布局