这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
CSS是什么
Cascapipg Style Sheets用来定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
基本结构
使用css的三种方法
- 外链
- 潜入
- 内联
css是如何工作的
选择器Selector
定位页面元素的工具
- 标签、类名、id
- 属性
- 位置
特殊：通配符选择器
id选择器——#
具有唯一性
类选择器——.
属性选择器——[]
伪类（pseudo-classes）
状态伪类——:
:link
:visited
:hover
:active
:focus
结构伪类
:first-child :last-child
组合
选择器组
用逗号分开
颜色
RGB模型
RED+GREEN+BLUE
两种表示方法：
- #六位字符
- rgb(三个数字)
HSL模型
Hue 色相
Saturation 饱和度
Lightness 亮度
透明图 alpha
rgb+alpha=rgba
hsl+alpha=hsla
字体
font-family
为了防止前几个字体找不到，一般会写多个字体 通常中文字体中会包含英文字体，当遇到同时指定不同中英文字体时，把英文的写前面
web fonts
字体大小 font-size
字体效果 font-style
字体粗细 font-weight
取值100-900，与字体相关，需要字体支持
行高 line-height
无单位即为与字体的倍数
font属性
（这里开始视频不同步了 字重 行高 颜色等等都可以写到一起
对齐 text-align
文字间距 letter-spacing
单词间距 word-sapcing
换行控制 whitespace
调试CSS
windows:ctrl+shift+i
mac:cmd+opt+i
选择器的特异度
继承
某些属性会自动继承父元素的计算值，除非显式制定一个值
显示继承
使属性值为 inherit
初始值
css 的求值过程
布局 Layout
确定内容大小位置的算法 依据元素、容器、兄弟节点、和内容等信息来计算
三种布局
常规流
浮动
绝对定位
盒模型
content-box
border-box
width
height
padding
快捷写法： 上右下左、上下左右
border
小技巧：把width、height设置为0可以画三角形
margin
小技巧：
- 设置margin：auto可以居中
- margin collapse，存在于垂直方向上，区上下边距最大值
overflow
块级+行级
常规流
行级排版上下文 IFC(Inline Formatting Context)
只包含行级盒子的容器
- 盒子在一行内水平摆放
- 一行放不下时，换行显示
- text-align 决定一行内盒子的水平对齐
- vertical-align 决定一个盒子在行内的垂直对齐避开浮动(float)元素*
块级排版上下文 BFC(Box Formatting Context)
这些元素是dfc的
- 盒子从上到下摆放
- 垂直 margin 合并
- BFC内盒子的 margin 不会与外面的合并
- BFC 不会和浮动元素重叠
IFC里放BFC-会被切开
Flex Box
- 一种新的排版上下文它可以控制子级盒子的:
- 摆放的流向 (→ ← ↑↓)
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐是否允许折行
主轴侧轴
justify-content 主轴排列方式 justify-self个别对齐
align-items 侧轴对齐，align-self个别对齐
flexibility
Grid
划分网格
网格线
float 浮动
主要是为了实现文字环绕
position属性
relative
absolote
fixed
相对于窗口定位
sticky
学习建议
- 利用好mdn+w3c css
- 保持好奇心
- 持续学习
