这是我参加第五届青训营伴学笔记创作活动的第2天，组成：选择器，属性color，属性值white, 声明
使用CSS：1.外链2.嵌入3.内联
如何工作：加载html,解析html，加载css，解析css创建dom树
选择器：*通配选择器，标签选择器，id选择器（一般id的值唯一），类选择器class,属性选择器input,状态伪类选择处在特定状态下的链接，结构伪类，组合的方式放在一块，
组合：直接组合，AB，满足A同时满足B,后代组合 A B，选中B，如果他是A的子孙，亲子组合A>B选中B如果其是A的字元素
选择器组，可以用逗号把选择器隔开
颜色：1.RGB用括号0-255或#6位字符16进制2.HSL颜色，饱和度，亮度3.指定颜色值4.alpha 透明度 1为不透明，0为透明例rgba(1,1,1,1)
字体:font-family serif衬线体，Sans-Serif 无衬线体 Cursive 手写体 Fantasy， Monospace 等宽字体，想用特定字体用web-font 字体大小font-size small med large , 字体粗细font-weight,斜体font-style italic text，行高line-height,baseline距离
当多种选择器对应到同一元素时，优先级根据特异度决定，越特殊越高
计算特异度，选择器包含 id,伪类，标签，哪个有稀有的元素哪个特殊，且id>伪类>标签，例如1，2，2高于0，2，2，
继承，显式继承，设置inherit,与模型相关的属性不可继承，一层往上找仍没找到可继承则变为初始值
初始值关键字为initial
html与css的具体关系-css的求值过程:dom树U样式规则>filtering(对应规则进行筛选）>（声明值，某属性可能有多个声明值) cascading（按照来源、选择器特异性、书写先后顺序筛选优先级最高的,筛选所得的值也叫层叠值）>defaulting（当层叠值为空的时候，使用继承值或初始值得到的值叫指定值）>resolving（把相对路径转为绝对路径，得到的值）>formatting(将关键字和百分比等都转化为绝对值）>constraining将小数像素值转为实际值
布局：确定内容的大小和位置的算法
布局相关技术：常规流，浮动，绝对定位
常规流：块级、行级、表格布局、flexbox、grid布局
盒模型，把元素理解为一个个盒子，margin（指定元素四个方向的外边距，取值和百分数参照物同下,当宽度和高度相等时margin:auto 水平居中，border（指定容器边框样式，粗细和颜色，三种属性border-width/style/color,四个方向border-top/right/bottom/left,当四个边框颜色不同时长宽为0并设部分为透明即可得不同形状的三角形),padding（指定元素四个方向的内边距，百分数相对于容器宽度），content(width,height( 都是content box的）取值为长度，百分数，auto)位置由外向内
块级（block level box) 不和其他盒子并列摆放，适用所有的盒模型属性
行级 (inline level box) 和其他行级盒子一起放在一行或拆开成多行，盒模型中的width,height不适用
块级元素body,article,div等，行级元素span等
display属性，block块级盒子，inline行级盒子,inline-block本身是行级，可以放在行盒中，可以设置宽高，作为一个整体不会拆成很多行，none不会展示
行级排版上下文，inline formatting context (IFC)
块级排版上下文，block formatting context(BFC)
如果既有行级盒子也有块级盒子，则浏览器创建两个匿名的盒子包裹两段文字
Flex box: 当打出display: flex时，不再遵守IFC和BFC，遵守flex排版。通过flex direction控制流向，对齐时利用主轴，侧轴，主轴通过justify-content控制空格，侧轴通过align-items 同理用flex-start, flex-end, center 等
Flexibility：可以设置子项的弹性，当容器有剩余空间时，会伸展，反之，则会伸缩。Flex-grow有剩余空间时的伸展能力，flex-shrink 容器空间不足时的收缩能力，flex-basis没有伸展或收缩时的基础长度
Flex: 1 =flex-grow:1 flex: 100px= flex-basis:100px
Grid 布局，必要性：flex是一维，grid是二维
Display: grid划分网络
Grid line 网格线，目的：把内容放进网格中通过grid-row横着划线和grid-column竖着划线
float浮动，即排版时文字会绕开图片等（图文混排时用）
position属性：static, relative(相对于自己本应在的位置进行偏移）, absolute（脱离常规流，相对于最近的非static祖先进行定位，不会对流内元素布局造成影响）,fixed（总是相对于窗口进行定位）
