这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
CSS是什么？
用来定义页面元素的样式：
设置字体和颜色
设置位置和大小
添加动画效果
CSS：选择器（选择页面的元素）+大括号+内容（color属性：white属性值；（一条声明））
由一条条的样式规则组成CSS
CSS外链：运用link标签 单文件 关注点分离
CSS嵌入：style标签
CSS内联：在标签中写style属性（不推荐）
CSS的工作方式：
加载HTML 解析HTML 创建DOM树 展示页面
在解析HTML后的同时开始加载CSS和解析CSS 添加样式到DOM节点
选择器 （选择HTML中对应的标签设置样式）
id 唯一元素 #
class 同一类型 .
[] 属性选择器 具有相同属性就能赋予样式 例：input[type="1"]
^=开头 $=结尾
伪类（元素处于某一种状态的时候去选中）
状态伪类 a:hover a:active input:focus a:visited…… 用户交互发生变化样式
结构伪类 dom节点出现的地方不同样式不同 li:first-child
组合方式
选择器组
RGB——颜色（指定每一种颜色的多少来得到颜色）
rgb（1，1，1）
#8f8f4a
HSL——颜色 （Hue色相，Saturation饱和度，Lightness亮度）
hsl（18，91%，15%）
alpha——透明度
font——family字体
font——……
深入CSS
多个选择器选择到同一个标签 哪条规则生效
根据选择器的特异度（Specificity）
id＞（伪）类＞标签
覆盖效果（特殊样式覆盖基础样式）
继承（子级继承父级） 标签套标签
显式继承（不可继承的时候，可以用inherit）
*{box——sizing：inherit}
初始值（元素的初始值）
background-color:transparent
margin-left:0
initial关键字显式重置为初始值
布局（Layout）
常规流 ：行级 块级 表格布局 FiexBox Grid布局
浮动
绝对定位
盒子模型
margin
border
padding
content（height width）
width：长度，百分数，auto
(百分数相对于容器的content box高度)
容器有指定的高度，百分数才生效
height同理
padding：内边距
top left……
百分数相对于容器的宽度
border：边框 （同上）
四条边框颜色不同时……
margin：外边距（同上）
两边均auto实现居中
box-sizing：border-box(实用)
height，width包含border
overflow：visible hidden scroll
块级vs行级
Block：不和其他盒子并列摆放
Inline：和其他行级盒子一起放在一行或拆开成为多行
Inline-block：行级中的块级
display属性
overflow-wrap:break-word 遇上长字符串，超出块范围就换行
行级
盒子在一行内水平摆放
一行放不下就换行显示
块级
盒子从上到下
垂直margin合并
BFC内盒子的margin不会与外面的合并
BFC不会和浮动元素重叠
Flex Box
一种新的排版上下文
.container{display:flex}
控制子级盒子各项特征
flex-direction
justify-content水平
align-item垂直
flex-start flex-end……
flex弹性:flexibility (子项的弹性)
flex-grow:弹性的能力（有剩余空间的时候）
flex-shrink:压缩的能力
Grid(相较于flex，相当于二维)
grid-template:网格划分
grid-template-columns:列
grid-template-rows:行
fr份数
grid line网格线
grid-area网格布局
Float浮动
文字环绕图片
Position
static非定位元素
relative相当于原来的位置偏移
absolute相对于最近的非static祖先定位
fixed
CSS学习：
MDN和W3C CSS规范充分利用
保持学习
保持好奇心
