这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
一.整体内容总结
css的引入，工作方式和一些属性以及常用的定位方法
二.详细内容
1.css的主要作用
设置字体和颜色,设置位置和大小,添加动画效果
2.css引入的三种方法
(1).内联样式
<p style="font-size:60px;">周游</p>
(2). 内部样式表
可以将css代码编写到一个style标签中
(3). 外部样式表(推荐)
将css编写到一个外部文件，通过link标签引入。
3.加载页面的流程
(引自课件)
其中在解析css时，dom树+样式规则通过filtering进行筛选(选择器匹配，属性是否有效，media等)，再去看一个元素匹配到多少声明值p{font-size:16px;color:red;}等在判断优先级最高的声明值(!import>内联样式>id选择器>类选择器=伪类选择器=属性选择器>标签选择器=)拿出优先级最高的值，当层叠值为空的时候继承或得到初始值。其中在解析css时，dom树+样式规则通过filtering进行筛选(选择器匹配，属性是否有效，media等)，再去看一个元素匹配到多少声明值p{font-size:16px;color:red;}等在判断优先级最高的声明值(!import>内联样式>id选择器>类选择器=伪类选择器=属性选择器>标签选择器=伪元素选择器>通配选择器)拿出优先级最高的值，当层叠值为空的时候继承或得到初始值。保证值不为空到resolving将一些关键字转化，比如将em转化为px,将相对路径转为绝对路径，再将计算值进一步转化，百分比等都转为绝对值，进行使用值。
4.css基础
(1)选择器， 选择器权重，内联样式 1000，id选择器 100，类和伪类选择器 10，元素选择器 1，通配选择器 0。 继承来的选择器没有样式
(2)css颜色 颜色rgba(0,0,0,1) #00000000(后两位是透明度，越小越透明) HSLA(色彩0-360，饱和度0-100%，亮度0-100%,透明度0-1)
(3)字体
字体font-family，在最后面加上通用字体族
font-size: small medium large 长度px em 百分数 相对于父元素字体大小
font-style: normal italic(斜体)
font-weight:100-900 400normal 700bold 不是所有的字体都有900的自重
line-height:1.6
white-space:normal nowrap pre(保留所有) pre-wrap(显示不下自动换行) pre-line(合并空格，保留换行)
css中每个属性都有一个初始值 background-color:transparent;margin-left:0拿到值,解析成dom树,值就是我们在css渲染流程呢时所提到的值。
(4)布局
分为常规流(行级/块级/表格布局/flex/grid布局) 浮动 绝对定位
盒模型，width/height指content box宽度 取值为长度，auto
百分数相对于容器的content box宽度,相对于父级的
padding 百分数相对于容器的宽度，上右下左
border 边框样式，粗细，颜色
border:1px solid red; border-left:2px border-width:3px border-style: solid border-color:green
border-left-width:3px; border-top-color: #fooborder宽高为0，四个不同颜色，四个三角形 margin:长度/百分数/auto margin：auto 水平居中
margin垂直方向边距折叠，取最大的
border-box怪异盒子有的会让文字去溢出， overflow:visible/hidden/scroll
块级 一行一个 body article div main section h1-6 p ul li
行级 盒模型中的width/height不适用，由内容决定 多行 span em strong cite code
inline-block 本身是一个inline
只包含行级容器 创建IFC
IFC排版规则
一行内水平摆放 一行放不下换行显示
text-align水平对齐 vertical-align垂直
避开float元素
块级排版上下文BFC
根元素，浮动/绝对定位。inline-block
flex子项和grid子项
overflow值不是visible的块盒
display: flow-root
BFC排版规则
盒子从上到下
垂直margin合并
BFC内的盒子margin不会和外面的合并
不与浮动元素重叠
flex布局，
主轴justify-content(flex-start/flex-end/center/space-between/space-around/space-evenly)
侧轴align-items(flex-start/flex-end/center/stretch/baseline基线对齐)
伸缩空间，flex-grow/flex-basis
grid布局
display:grid让元素生成一个块级的grid容器，使用grid-template相关属性将容器划分为网格
设置每个子项栈哪些行列
grid-template-column:100px 100px 200px;(行数) grid-template-rows:100px 100px;(列数)
1fr 份数
grid line网格线 把一整个地方分成几份(官方分的，很强大的布局方式)
grid-row-start:1 grid-column-start:1 grid-row-end:1 grid-column-start:1
float实现文字环绕效果
position定位
static 默认值，非定位元素
relative 相对自身原本位置偏移，不脱离文档流
absolute 绝对定位，相对于非static祖先元素定位
fixed 相对于视口绝对定位
粘性定位，设置导航栏
