这是我参与「第四届青训营 」笔记创作活动的第1天。
一、页面使用css
1.外链（推荐） 便于形成组件类
2.嵌入
3.内链
4.选择器类型 通配选择器 属性选择器 id选择器 伪类选择器
eg： 选择器{} 选择器可以使元素名，也可以是类，id选择器（id的值是唯一的一个值）。 表单input disabled表示不能输入，禁用。 状态伪类：在输入框输入文字时叫做focus状态；对于链接的不同状态可以使用伪类。 结构伪类：可以通过元素在父级结点的相对位置来选中设置属性； eg：li：first-child 如果要针对某一属性值来设置样式，即在标签或选择器后面加方括号，括号里面写入针对更改的属性值。 eg：a [ href ^="#"]{} 表明a标签中href属性是针对属性值以“#”开头的就会被匹配上。 a [ href $=".jpg"]{} 表明a标签中href属性是针对属性值以“.jpg”结尾的就会被匹配上。 除以上几种选择器以外，还可以通过组合的方式。
5.颜色属性
①RGB 使用rgb（,,）表示，三值范围为0-255或者表示为十六进制； ②HSL Hue:色相，色彩的基本属性，取值范围为0-360； Saturation:饱和度，颜色的鲜艳程度：越高颜色越鲜艳，取值范围为0-100%； Lightness:亮度，颜色的明亮程度：越高颜色越亮，取值范围是0-100%。 ③alpha 透明度 取值范围：0-1，alpha为1时不透明。
6.字体样式
① font-family：里面包含多种字体以便不同版本浏览器选择； ②font-size: a.关键词（small，medium，large b.长度：px，em； c.百分数：相对于父元素字体大小； ③斜体：font-style：normal/italic； ④font-weight：字重（100-900）字体本身会设置一些字重，所以有时候无法设置字重； ⑤line-height:行高，两行文字基准线间的距离；使用数字的话表示数字大小的多少倍。 font可以简写，对齐：text-alin:left right center justify(l中间空格拉大，两端对齐，通常对最后一行不适用) ； ⑥letter-spacing：字符间距； ⑦word-spacing：单词间距； ⑧Whitespace：nowrap（将空白空间占满，不换行） Pre：显示空格、回车、不换行； Pre-wrap：显示空格、回车、换行； Pre-line：显示回车、不显示空格、换行。
二、深入CSS
1.特异度
选择器越特殊优先级越高； id选择器>（伪）类>标签
2.继承
某些属性会自动继承父元素的计算值，除非显示指定一个值。（颜色和属性） *无法继承的一些属性：box-sizing：inherit（显示的从父级继承）。
3.初始值
可以使用initial关键字设置成初始值。
4.布局(layout)
①常规流
a.行级 ； b.块级 *块级排版上下文（Block Formatting Context）： 盒子从上到下摆放； 垂直margin（外边距）合并； BFC内盒子的margin不会与外面的合并； BFC不会和浮动元素重叠； c.表格布局 d.FlexBox（弹性布局） *可以控制自己盒子的： 摆放的流向及顺序； 盒子宽度和高度； 水平和垂直方向的对齐； 是否允许折行； 其容器基本语法为：display：flex； 常用属性主要包括： a.flexDirection：容器成员的排列方向； b.justifyContent：容器成员在主轴上的对齐方式； c.alignItems：容器成员在交叉轴上的对齐方式； d.alignContent：多根轴线的对齐方式； e.flexWrap：容器成员在轴线方向排列不下时的换行方式； 容器成员常用的属性主要包括： a.order：容器成员的排列顺序（默认为0），数值越小排列越靠前； b.alignSelf：容器成员在容器的交叉轴对齐方式（默认auto，继承容器的align-items属性），单独设置会覆盖容器的align-items属性； c.flexGrow：空间剩余时，容器成员占剩余空间的放大比例（默认值为0，存在剩余空间也不放大；值为1时，等分剩余空间，某一个容器为2时则剩余空间比其他多占一倍）； d.flexShrink：空间不足时，容器成员的缩小比例（默认为1，若容器都为1即等比例缩小；一个成员为0其余为1，空间不足是则容器成员为0的不缩小）； e.flexBasis：分配多余空间前，容器成员占据的主轴空间（即横向方向的）； f.flex：属性flexGrow、flexShrink 和 flexBasis的快捷设置方式 ；
②浮动
*语法：float：left /right ；
③绝对定位
a.position：static/relative/absolute/fixed *在常规流程布局； *相对于自己笨应该在的位置进行偏移（使用top,left,button,right）； *流内其他元素不受影响； b.absolute *脱离常规流，相对于最近的非static祖先定位； *不会对流内元素布局产生影响。 在青训营中的css学习进度较快，比较适合有一些css基础的友友用来复习使用；但！有一点，青训营中的css课程给我建立了一个大的框架，将我之前所学的零散的知识点串起来了。在页面中很常用的flex box（弹性布局）以及Grid布局在本篇文章中没有进行详细的记录和阐述，后面等空闲下来会做一个比较完成的知识总结，便于梳理知识点。
