CSS 笔记 | 查漏补缺
加入了字节的青训营，看到了一些课程的内容，然后自己看了一下前端一些入门的东西，想着夯实一下基础，结果发现真的还有挺多东西遗忘了或者不深刻，所以就有了这个笔记。主要记录自己不太会的内容，会的就不怎么记录了，如果有幸被人看到，也可以看看下面有没有你不会的，查漏补缺，欢迎评论纠错。
1.css 选择器
这里在伪类和伪元素的部分很多都知道，但是用的不多干脆就都写上了。
1.1 属性选择器
有以下几种形式进行属性选择
- [attr] 用来选择带有 attr 属性的元素
- [attr="xxx"] 用来选择 attr 属性等于 xxx 的元素,
- [attr^="xxx"] 用来选择 attr 属性以 xxx 开头的元素
- [attr$="xxx"] 用来选择 attr 属性以 xxx 结尾的元素
<style>
a["class"]{
color:green;
}
input[type="passoword"] {
border-color: red;
color: red;
}
a[href^='#']{
color: #fff;
}
a[href$='.jpg']{
color: deepskyblue;
}
</style>
1.2 伪类选择器
1.2.1 标记状态的伪类
可以标记元素状态的伪类有以下几种，且顺序必须是 lvha。
| 伪类 | 说语法明 | 说明 |
|---|---|---|
| link | a:link | 未访问过的超链接的元素 |
| visited | a:visited | 访问过的超链接的元素 |
| hover | a:hover | 选取鼠标悬停的元素 |
| active | a:active | 选取点中的元素 |
| focus | input:focus | 选取获得焦点的元素 |
1.2.2 筛选功能的伪类
有些伪类也可以有筛选的功能，可以根据元素的特点或者索引来给特定的元素加上样式。这一类实在太多了，列举其中比较容易忘记的几种。
| 伪类 | 说语法明 | 说明 |
|---|---|---|
| frist-child/last-child | p:first-child | 选择父元素中的第一个元素或最后一个元素 |
| nth-child/nth-last-child(an+b) | p:nth-child(2) | 上一种选择器的扩展选取第 n 个子元素，这里的 an+b 是可以写成 2n+1 的形势，也就是 1、3、5、7、9 |
| nth-of-type/nth-last-of-type(an+b) | p:nth-of-type(2) | 属于父元素的特定类型的第 n 个子元素和倒数第 n 个子元素 |
| only-child | input:focus | 选取元素唯一的子元素,如果元素的父元素只有它一个子元素就会生效 |
| only-of-type | input:focus | 选取唯一的某个元素类型。如果元素的父元素只有它一个当前类型的子元素就会生效 |
注：这里所有的 tag:xxx 的形势，均是 tag 的父元素的子元素，不是 tag 的子元素。其中 nth-child 和 nth-of-type 乍一看很相似，但其实是不同的，nth-child(n)是子元素所有里面的第 n 个,nth-of-type(n)是把子元素按照 tag 类型分类后排列，选出每个 tag 排列之后的第 n 个元素。
1.3 组合选择器
| 名称 | 语法 | 说明 | 示例 |
|---|---|---|---|
| 直接组合 | AB | 满足 A 同时满足 B | input:focus |
| 后代组合 | A B | 选中 B，如果他是 A 的子孙 | nav a |
| 亲子组合 | A>B | 选中 B，如果他是 A 的子元素 | section>p |
| 兄弟选择器 | A~B | 选中 B，如果他和 A 同级并且在 A 的后面 | h2~p |
| 相邻选择器 | A+B | 选中 B，如果他紧跟在 A 后面 | h2+p |
2.html 中的换行符
在 html 中出现多个空格的时候，往往 html 会合并成一个空格，例如
<p class="text" white-space="pre">
This is a paragraph. The text is splitted into two lines.
</p>
包括使用 prettier 的时候也是这样，会自动把我的空格合并。
p 标签有一个white-space属性
| 属性值 | 说明 |
|---|---|
| normal | 默认行为 |
| nowrap | 强制不换行 |
| pre | 保留所有，和原本的一样 |
| pre-warp | 保留所有，该换行就换行 |
| pre-line | 保留换行，但是空格合并 |
3.css 求值过程
css 求值过程：首先根据 DOM 树何样式规则筛选出能匹配到当前元素的值，找到他们对应的多个声明值，之后按照这些特性计算优先级，最终得到一个 Cascaded Value，即优先级最高的值。作为这个元素的 css 值。 当这个值为空值，再考虑继承或者初始值。至此一定有一个指定的值，但是这个值不一定能直接被用来作为浏览器使用的值，进一步对单位或者路径 resolving，得到计算值，最后通过进一步转换得到使用值，并将小数转换为整数，最终得到了实际值。 计算值是在 css 和 html 中得到的值，但是很多值需要结合浏览器实际宽度来计算，这部分的计算是在 formatting 中实现的。 当然有些样式可能会冲突，比如 max-width 与 width，这一部分的计算也会在 constraining 中计算。
4.inline 元素的 padding 与 margin
首先 html 元素可以分为替换元素与非替换元素，其中非替换元素是由用户代理（一般是浏览器）生成的，例如
<p>this is a paragraph</p>。其内容直接是 p 标签中的'this is a paragraph'。而替换元素则是自己本身没有任何内容，指向文档外的内容，例如<img src='hello.png' />。
要讨论的问题则要分成这两种情况来讨论。
4.1 非替换元素
5.grid 布局
5.1 grid-template-columns 和 grid-template-rows 属性
- grid-template-columns，列上的划分
- grid-template-rows，行上的划分
display: grid;
grid-template-columns: 100px 100px 200px;
grid-template-rows: 100px 100px;
css3 中有一个新单位 fr，代表分数，可以用grid-template-columns:1fr 1fr 2fr;实现相同的效果。
5.2 grid-area
首先划分网格，网格与网格之间有很多线。
将他们排列之后，则通过起始行/起始列/结束行/结束列来定义一个单元在 grid 布局中的占据的位置。
例如：
.a {
grid-row-start: 1;
grid-column-start: 1;
grid-row-end: 3;
grid-column-end: 4;
}
上述结果等同于
.a {
grid-area: 1/1/3/4;
}
