这是我参与「第四届青训营 」笔记创作活动的第2天
CSS基本概念
Cascading Style Sheets（层叠样式表）主要用来定义页面元素的样式，包括设置字体和颜色、设置位置和大小、添加动画效果等。
基础代码
选择器{属性:属性值}
- 声明格式：
属性：属性值- 样式规则：
选择器{
//声明
}
引入方式
- 外链
推荐——内容样式分离
<link rel="stylesheet" href="/assets/style.css">
- 嵌入（HTML标签）
组件：关注点分离 直接在<head>内通过<style>标签引入 - 内联（写在标签属性内）
【不推荐】【UI组件库】
<p style="margin:lem 0">Example</p>
选择器
选择器用于选择页面上的某一个或某一类元素
属性
属性用于设置选择器的样式，主要类型如下所示
布局
布局是确定内容位置和大小的算法，基本上依据元素、容器、兄弟节点和内容等信息来计算。
常规流
块级 Block Level Box
- 布局规则
- 属性
- 不和其他盒子并列摆放
- 适用所有盒模型属性
- 块级元素（HTML概念）
- 生成块级盒子
- body、article、div、main、section、h1~6、p、ul、li
- 强行转化 display：block
- 排版上下文 Block Formatting Context
某些容器会创建一个BFC
- 根元素
- 浮动、绝对定位、inline-block
- Flex子项和Grid子项
- overflow值不是visible的块盒
- display：flow-root
- 盒子从上到下摆放
- 垂直margin合并，BFC内盒子的margin不会与外面的合并
行级 Inline Level Box
- 布局规则
- 属性
- 和其他行级盒子一起放在一行，或拆成多行
- width、height不适用
- 行级元素（HTML概念）
- 生成行级盒子，内容分散在多个行盒中
- span、em、strong、cite、code等
- 强行转化 display：inline
- 排版上下文 Inline Formatting Context
只包含行级盒子的容器会创建一个IFC
- 盒子在一行内水平摆放
- 放不下时自动换行显示
- text-align决定一行内盒子的水平对齐
- vertical-align决定一个盒子在行内垂直对齐
- 避开浮动元素
- 行级盒子内包含块级和行级内容时，会将块级内容存放在匿名行级盒子中!
父级中不能同时有块级和行级盒子
