这是我参与「第五届青训营」伴学笔记创作活动的第2天
一.理解CSS
CSS:Cascading Style Sheets 定义页面元素样式。
h1（选择器Selector）
color（选择器Property）
pink（属性值 Value）
h1{
color:pink;
font-size:14px
}
在页面中使用CSS：外链（推荐，内容样式分离）、嵌入、内联（style，不写选择器,不推荐，样式与具体标签绑定）
CSS工作流程：
选择器：
- 通配选择器
- 标签选择器
- id选择器（id唯一）
- 类选择器
- 属性选择器
^= 以什么开头
$= 以什么结尾
伪类选择器-不同状态
选择器组
颜色
RGB：三通道
HSV: H色相0-360 S饱和度0-100% L亮度0-100%
不透明度
二.选择器特异度
//按键1背景颜色为灰色
<button class="btn">button1</button>
//按键2背景颜色为黑色
<button class="btn primary">button2</button>
<style>
.btn{
background:#333;
color:red;
}
.btn.primary{
background:#fff
}
</style>
继承：按键2的文字颜色为红色
初始值：background-color：initial
三.布局（Layout）
布局：确定内容的大小和位置的算法（依据元素、容器、兄弟节点和内容等信息计算）
相关技术：常规流（行、块、表格、Flebox、Grid） 浮动 绝对定位
*三角形：设置边框和不透明度，当四个边框颜色不同时颜色从中间切
三.行级 Inline Level Box
- 和其他行极盒子放在一起或拆开成多行
- 盒模型中的width、height不适用
- display：inline inline-block：本身是行极，可以放在行盒中
排版上下文：
只包含行级的盒子容器会创建IFC
避开浮动元素
四.块级 Block Level Box
- 不和其他盒子并列摆放
- 适用所有的盒模型属性
- display：block
排版上下文：
创建BFC的容器：
- 根元素
- 浮动、绝对定位、inline-block
- Flex和Grid
- overflow值不是visible的块盒
- display：flow-root 内盒子不与外面合并
不和浮动元素重叠
盒子从上到下摆放
五.Flex Box
一种新的排版上下文
可以控制子级盒子的：摆放的流向、摆放顺序、盒子的宽度和高度、水平和垂直方向的对齐、是否允许折行
六.Grid
二维网格进行布局
基本上所有布局都可以通过Grid实现
划分网格：
grid-template-columns
grid-template-rows
七.float浮动和绝对定位
float浮动：实现文字环绕
绝对定位
