这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
CSS 简介
定义
Cascading Style Sheets
用于定义页面元素的样式
h1 {
color: red;
}
结构
结构选择器Selector、属性Property、属性值Value、声明Declaration
引用方式
外链 | link标签、嵌入 | style标签、内联 | style属性
加载方式
加载HTML 解析HTML 创建DOM树 添加样式 渲染展示页面
加载CSS 解析CSS
选择器
通配选择器
标签选择器
p
类选择器
.class
id选择器
#id
属性选择器
[disabled]
[type="password"]
a[href^="#"] 以#开头
a[href$=".jpg"] .jpg结尾
伪类选择器
a:link 默认状态（链接）
a:visited 已访问（链接）
:hover 鼠标移动于其上
:active 鼠标点击元素
:focus 聚焦状态
:first-child
:last-child
组合选择器
p.active
p, a
p a
p > a
颜色
-
颜色关键字
white -
十六进制值
#ffffff#fff -
RGB函数
rgb(255,255,255) -
HSL函数
hsl(0,1,0)- 色相H 0-360 色彩基本属性
- 饱和度S 0-100% 色彩鲜艳程度
- 亮度L 0-100%
-
alpha不透明度
#ffffff00rgba(255,255,255,1)hsla(255,255,255,1)
文字排版相关属性
color 文字颜色（前景色）
font-family 字体（一般最后放通用字体族 英文字体放中文字体后边）
通用字体族
serif 衬线体
sans-serif 无衬线体
cursive 手写体
fantasy
monospace 等宽字体
@font-face 加载网络字体
font-size 字体大小（关键字、长度、百分数等）
font-style 斜体
font-weight 粗体
line-height 行高（两行文字基线之间的距离）
font
text-align 文字水平对齐方式
word-spacing 单词间空白数量
letter-spacing 字符间空白数量
text-indent 首行缩进数量
text-decoration 文字装饰（下划线上划线删除线等）
white-space 空白符处理方式
进阶内容
选择器特异度
id>类>标签>通配
复合选择器比较，构成的选择器的优先级相加
继承
自动继承父元素计算值
仅部分属性会有继承特性
显式继承
属性显示指定 inherit 属性值生效
初始值
所有属性都有初始值
显式重置
属性显式指定为initial属性值置为初始值
CSS 值的生成
DOM树与样式规则合成
filtering - 根据选择器等筛选有效的规则
声明值 - 元素属性可能有至多个声明值 - Declared Value
cascading - 选择出优先级最高的属性值
层叠值 - 层叠过程中保留的值 - Cascaded Value
defaulting - 继承或初始值
指定值 - 保证指定值非空 -Specified Value
resolving：将一些相对值或关键值转换为绝对值
计算值 - 尽可能转换为最具体的值 - Computed Value
formatting：计算值进一步转换为绝对值
使用值 - 实际布局时使用的值，无相对值与关键字 - Used Value
constraining：小数值转换为整数
实际值 - 渲染时实际生效的值
布局
确定内容的大小和位置的算法
依据元素、容器、兄弟节点和内容等来计算
-
常规流（即文档流）
- 行级
- 块级
- 表格布局
- flex布局
- grid布局
-
浮动
-
定位 position
- 绝对定位
- 相对定位
- 粘性定位
- 固定定位
盒子
margin 外边距（百分数相对容器宽度）
border 边框（样式、粗细、颜色）
padding 内边距（百分数相对容器宽度）
content 内容区
width&height 默认指定content的宽高 （百分数相对content宽度 | 百分数相对content高度，且仅当容器有指定高度时候生效）
margin:auto 常用于实现水平居中
外边距重叠 margin collapse
常在同级元素或父子元素间发生
box-sizing属性
控制width及height的计算方式
border-box
padding-box
content-box
内容溢出 overflow
设置 overflow 属性
visible溢出可见
hidden溢出隐藏
scroll溢出滚动显示
块级盒子&行级盒子
可以使用display属性转换
inline-行级元素可设置宽高，不强制换行
display属性
block块级
inline行级
inline-block行内块
none完全忽略
常规流 Normal Flow
一般仅根元素、浮动及绝对定位元素脱离常规流
常规流内盒子，在某种排版上下文中参与布局（如行级、块级、Table、Flex、Grid等）
行级排版上下文 IFC
只包含行级盒子的容器
盒子在一行内水平摆放
一行放不下换行显示
text-align 属性决定水平对齐
vertical-align 属性决定垂直对齐
避开浮动元素
块级排版上下文 BFC
盒子自上往下依次合并
垂直 margin 合并
BFC 内盒子 margin 不与外部盒子合并
BFC 不与浮动元素重叠
Flex Box
弹性容器与弹性元素
主轴和辅轴
主轴对齐 justify-content
辅轴对齐 align-items
控制主轴及辅轴方向 flex-direction
元素辅轴自定义方向 align-self
元素级别 order
以下三种属性缩写 flex
元素扩展能力 flex-grow
元素压缩能力 flex-shrink
元素基础长度 flex-basis
Grid 布局
grid-template-columns 纵向网格
grid-template-rows 横向网格
grid-row-start 当前网格起始列
grid-column-start 当前网格起始行
grid-row-end 当前网格结束列
grid-column-end 当前网格结束行
grid-area 当前网格起始列&起始行&结束列&结束行
浮动 float
现在一般仅应用于文字环绕效果，使用较少
定位 position
static 不偏移
relative 相对自身原本位置偏移
absolute 相对非static元素偏移（或根元素html）[脱离文档流]
fixed 相对视口偏移[脱离文档流]
sticky
