这是我参与「第四届青训营 」笔记创作活动的的第4天
选择器
- 元素选择器
- 类选择器
- Id选择器
- 标签属性选择器a[title] { }，a[href="test.com"] { }
其中，伪类a:hover { }，伪元素p::first-line { }选择一个元素的某个部分而不是元素自己
选择器优先级
选择器的优先级由四个部分相加，包括“个十百千”共4位
- 个位： 选择器中包含元素、伪元素选择器则该位得一分。
- 十位： 选择器中包含类选择器、属性选择器或者伪类则该位得一分。
- 百位： 选择器中包含 ID 选择器则该位得一分。
- 千位： 声明在内联样式则该位得一分。若只有该声明，则为1000分。
其中，通用选择器 (*)，组合符 (+, >, ~, ' ')，和否定伪类 (:not) 不会影响优先级。
CSS属性的值
数字，长度，百分比；颜色；图片；位置；字符串和标识符；函数
书写模式
Writing-mode:书写模式
-
Horizontal-tb 从上到下(top->bottom)
-
vertical-rl 从右到左(right->left)
-
vertical-lr 从左到右(left->right)
横向书写模式下，映射到width的属性被称作内联尺寸（[inline-size]——内联维度的尺寸。
映射height的属性被称为块级尺寸（[block-size]，即块级维度的尺寸。
属性映射
1.margin-top属性的映射是margin-block-start——总是指向块级维度开始处的边距。
2.padding-left属性映射到padding-inline-start，应用到内联开始方向（该书写模式文本开始的地方）上的内边距。
3.border-bottom属性映射到的是border-block-end，也就是块级维度结尾处的边框。
映射对照
border-top——border-block-start
border-bottom——border-block-end
border-left——border-inline-start
border-right——border-inline-end
标准盒子
标准盒子模型的内容计算：content=width*height，
盒子的总宽度=width+padding（左右）+margin（左右）+border（左右）
总宽度等于所有附加值，偏移值的总和；
怪异盒子
怪异盒子模型的内容计算：content=width*height+padding+border
盒子的总宽度=width+margin（左右）此时的width宽度已经包含了padding和border的值；
