这是我参与「第五届青训营 」伴学笔记创作活动的第2天
01CSS的基本使用
- 外链：link标签，@import
- 嵌入
- 内联
02CSS选择器
- 属性选择器
-
-
- 为所有有disable属性的元素添加样式
-
-
-
- 选择特定值的元素
-
-
-
- 匹配特定条件（类似正则规则）
-
组合式选择器
- .表示&，需要同时满足
-
- input.error表示input标签且class类为error
选择器组
03伪类
状态伪类
- a的四种状态
- input
- 选择子元素
04字体
font-family
- 通用字体族：加在字体族的最后，从设备中已有的此类字体中选择展示
- 英文在前
Web Fonts
- 性能开销
font-size
- 关键词
-
- small、medium、large
- 长度
-
- px、em
- 百分数
-
- 相对于父元素字体的大小
05段落相关属性
line-height
- 文字基线间的距离
- 无单位的数字
-
- 表示字体大小的倍数
换行white-space
-
- pre：保留所有，空格+换行
- pre-wrap：自动换行，保留空格
- pre-line：合并空格，保留换行
06继承性
可继承
- 大部分的文字属性
不可继承
- 盒模型的相关属性
- display
显式继承
- 相当于给所有元素添加了默认值
初始值
浏览器CSS流程
- filter筛选出多个声明值
- cascading优先级选择出一个层叠值
- defaulting使用继承或初始值，决定出指定值
- resolving转换相对值(继承)为绝对值，变成computed Value计算值
- formatting计算值中的关键字和百分比，转化为绝对值，变成Used Value使用值
- constraining小数为整数，转换为渲染时的实际值
07布局
盒模型的宽高
- width和height指定的都是content box
- 取值：长度、百分数、auro
- 容器必须有指定的高度，百分数才生效，否则会循环依赖
盒模型的padding
- 百分比是相对盒子容器宽度的
CSS画三角形-border
- 颜色不同的四条边
- 把宽高设置为0，且把其中三条边隐藏
margin
- margin：auto水平居中
- margin collapse 折叠
-
- 两个元素的margin重叠时，取最大值而非他们之和
常用盒模型：border-box
- 宽度和长度包括了border和padding，content是减去他们之后的自适应长宽
08行级元素和块级元素
行级盒子与块级盒子
行级元素与块级元素
- 块级元素
-
- body
- article
- div
- main
- section
- h1-h6
- p
- ul
- li
- 行级元素
-
- span
- em
- strong
- cite
- code
display模式
- inline-block:可以和其他行内元素放在同一行；可以设置宽高；内部是一个整体，不可被拆分为多行（相当于内部生成了一个块级盒子）
IFC
BFC
- 创建BFC的情况
-
- 根元素
- 浮动、绝对定位、inline-block
- flex和grid的子项
- overflow：hidden
- display:flow-root
- 解决margin合并
- 清除浮动
行内元素包裹块级元素
- 内部的块级元素上下会创建两个匿名的块级元素
- 行级元素会被分割为两行（观察border的断开）
09Flex盒子
流向与对齐
- 控制流向
-
- row
- column
- reverse
- 控制对齐
-
- 主轴（流向所在的方向）
-
-
- justify-content:主轴对齐方式
-
-
-
-
- 常用的是space-between和center
-
-
-
- 侧轴
-
-
- align-item
-
-
-
-
- 默认为stretch
- 常用center
-
-
-
- align-self特殊设置某个元素
伸缩性flexibility
- flex-grow伸展
-
- 可伸展的剩余空间，分配比例
- flex-shrink
-
- 0刚性
- flex缩写
-
- flex：1——1 1 auto
10Grid布局
划分网格
- 行-列划分
放置元素网格线
11脱离文档流——Float和绝对定位
position的几种分类
- position：relative
-
- 常规流
- 相对自己的偏移，对其他元素无影响
- position：absolute
-
- 脱离常规流
- 相对于最近的非static祖先（一般为relative）
- position：fixed
-
- 脱标
- 相对于窗口
