这是我参与「第五届青训营 」伴学笔记创作活动的第 一 天

一、css 选择器

1.标签
2.类
3.id
4.属性选择器
1.普通格式
格式 ：[属性] {设置的样式} ，用在表单元素上面,链接标签。
2.属性是特定的值的时候
格式 ：标签元素[属性里面的值]{设置的样式}
3.字串匹配选择器
^ 匹配属性值以abc开头的所有元素
$ 匹配属性值以abc结尾的所有元素
* 匹配属性值包含字符串的所有字符
5.伪类选择器
伪类由冒号（:）后跟着伪类名称组成（例如，:hover）。
特殊例子：
li:first-child 、li:last-child，用来设置列表元素第一个格式和第二个格式，不用再来设置idl了
input.error 直接组合，标签元素是input ,类名是error的，才可以。

二、css 颜色

1.RGB
#000000 黑色
rgb(0,0,0)
hsl()
1.hue 色相是色彩的基本属性，如红色，黄色等；取值范围是0-360。
2.saturation 饱和度是指色彩的鲜艳程度，越高越鲜艳；取值范围0-100%。
3.lightness 亮度指颜色的明亮程度；越高颜色越亮；取值范围是0-100%。 alpha 透明度
取值范围0-1。

三、字体

1.font-family （选择字体的时候选择通用一点的）
serif：衬线体
sans-Serif无衬线体
Monospace 等宽字体组
2.web-font
@font-face{
font-family:f1;
src:
url(" ")fromat("woff2");
}
3.font-size
关键字：
small,medium，large
长度：
px,em（eg；2em ,设父元素为20px,那么此元素为40px）
百分数：
相对于父元素的字体大小
父元素为:20px （80%），为 20*0.8=16px;
4.font-weight(字体粗细)
5.line-height
1.字体之间的间距。
2.当以数字为值的时候，行高是字体本身的多少倍。
6.text-index
首行缩进
7.text-aglin
文本对齐 center left right
8.spacing
字体和单词间距

四、css选择器的特异角度

1.选择器优选级
id>class=伪类>标签
五、布局
1.确定内容的大小和未知的算法
2.依ro据元素容器兄弟节点和内容等信息来计算
3.相关技术：
1.常规流
行级 块级 表格布局 flex grid
盒子模型

2.浮动
3.绝对定位
4.属性
width:指定的是 context-box的高度
取值为长度,百分数，auto
auto 由浏览器根据其他属性确定
百分数相对于容器的context box宽度
height:容器有指定高度的时候，百分数才生效。

五、块级和行级

1.块级
不和其他盒子并排摆放，适用所有的盒模型属性
适用所有的盒模型属性
body,article,div,main,section,h1-6,p,ul,li
display:bolck
排版的时候注意：
1.根元素
2.浮动，绝对定位，inline-bolck
3.flex子项和grid子项
4.overflow值不是visible的块盒
5.display：flow-root;
bfc内的排版规则
1.盒子从上到下排放
2.垂直margin合并
3.BFC内盒子的margin不会与外面的合并
4.BFC不会和浮动元素重叠
2.行级
和其它行级盒子一起放在一行或拆开成多行
盒模型中的width,height不适用
span ,em ,strong,cite,code等
display:inline
排版的时候注意：
1.盒子在一行内水平摆放。
2.一行放不下时候，换行显示。
3.text-align 决定一个盒子的水平对齐。
4.vertica-align决定一个盒子在行内的垂直对齐
5.避开浮动（float）元素*
3.行内块
iinline-block
可以设置宽高，但是不单独占据一行。\

4.Flex BOx是什么
一种新的排版上下文
它可以控制子级盒子的：
摆放的流向（上下左右）
摆放的顺序
盒子宽度和高度
水平和垂直方向对齐
是否允许折行

5.display:grid;
1.display:grid
2.使用grid-template相关属性内容器划分为网格
3.设置每一个子项占那些行列
6.position
fixed:固定定位，一直固定在某个地方。
static:黏性定位，吸附在某个盒子上面。
存疑点：1.overflow:visible
2.display:flow-root\