这是我参与「第四届青训营 」笔记创作活动的第1天
- 属性选择器(选择所有有这个属性的元素
只要元素有
disabled这个属性就可以选中
字体
- 字体是按照字体族的先后顺序来匹配的 英文字体应用的字体族最好放在中文的前面
自定义字体族:
使用@font-face 需要加载(可能会比较慢o
- 行高 没有单位的话,就是当前的font-size为基准1
继承
跟盒子模型相关的属性一般都不能继承,比如height,但是可以使用inherit显式继承
这样继承的优先度比较低,可以被覆盖..some-widget就覆盖了继承的box-sizing属性
css求值过程
- 计算值 分析css跟html就能直接能计算得到的
- formatting 要实际布局才能得到的值 浏览器大小决定了vw vh大小
布局
- 常规流
- 行级
- 块级
- 表格布局
- flexbox
- grid布局
- 浮动
- 绝对定位
行级包块级 其实是出了两个匿名盒子分别包装 span的字体换行了
grid 网格布局
将一个盒子进行分隔 然后 内部可以使用子元素放在格子里面 有一点像flex布局 但是flex布局是一维的只有主轴和侧轴 但是grid就有很多线,将盒子分成很多的格子 grid可以有一点点像网格图 可以给每一条线标标号
通过线的标号来确定哪一条线
参考链接
最强大的 CSS 布局 —— Grid 布局
