这是我参与「第五届青训营」伴学笔记创作活动的第 2 天

第二课 CSS

一、什么是CSS

用来定义页面的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果

1.1 使用方式

外链

<link href="">

嵌入

<style></style>

内联

<p style=""></p>

各种使用方式的侧重场景不同

1.2 CSS如何工作

浏览器在解析HTML时慧加载CSS，解析CSS，将添加样式到DOM节点上，即创建好的DOM，最后合成渲染树（计算每一个节点的位置及样式），进而展示页面

1.3 选择器 Selector

找出页面元素去设置样式
通配选择器
类选择器
id选择器，需唯一的id
属性选择器
- 比如input 的 disabled属性{ }
- a[href^="#"] { }
伪类
- 状态伪类选择器：这个元素也要处于某一个状态下才能被选中，不同的标签可能拥有不同的状态伪类
- 结构伪类：根据dom节点出现的位置进行选中
```
li:first-child{
	// 父级第一个孩子
}
```
选择器组合的方式：

屏幕截图 2023-01-15 161410.png

1.4 颜色-RGB

指定每一种元素的颜色确定最终的颜色

rgb(0,0,0)
#000000

但是RGB没办法和颜色的特征结合起来
颜色-HSL

颜色的基本属性：0-360
饱和度：0-100%
亮度：0-100%
hsl(19,91%,84%)

透明度: 0~1

rgba(0,0,0,0.12)
hsla(0,0,0,0.12)
#ff000012

1.5 字体

font-family：可以指定多个字体，供浏览器所含有的字体选择
font-size：大小
font-weight：字重
line-height：行高，两行文字的一个基准线

可以在font里面统一编写

white-space：控制空白符（空格）去展示
- nowrap：不换行
- pre-wrap：自动换行
- pre-line：保留换行，合并空格

1.6 调试CSS

右键检查

二、深入CSS（上）

2.1 多个选择器选择到同一个元素

哪条规则生效

1、选择器的特异度

屏幕截图 2023-01-16 100739.png

2、继承

某些元素会自动继承其父元素的计算值，除非显式指定一个值
一般文字样式可以继承，但是像盒模型相关的样式不可继承，比如宽度

3、初始值

每个属性都有一个初始值
可以使用initial关键字显式重置为初始值
- background-color：initial；

4、具体计算渲染过程

屏幕截图 2023-01-16 102326.png [链接]: cdpn.io/webzhao/deb…

5、布局（Layout）

确定内容的大小和位置的算法
依据元素、容器、兄弟节点和内容等信息来计算

布局相关技术

常规流
1. 行级
2. 块级
3. 表格布局
4. FlexBox
5. Grid布局
浮动
绝对定位

一切都是盒子：

屏幕截图 2023-01-16 103933.png

width：

指定content box宽度
取值为长度、百分数、auto
auto由浏览器根据其他属性确定
百分数相对于容器的content box 宽度

height：

指定content box 高度
取值为长度、百分数、auto
auto取值由内容高度计算的来
百分数相对于容器的content box 高度
容器有指定高度时，百分数才生效

padding：

指定元素四个方向的内边距
百分数都是相对于容器的宽度

boder：

其边框样式
可以给四条边框颜色不同，可以根据其得到不同的三角形

margin：

指定四个方向的外边距
取值可以是长度、百分数、auto
- 定宽：使用margin：auto水平居中
百分数相对于容器宽度
margin collapse，边距合并
- 当上下元素有margin-bottom和margin-top时，会有一个边距合并

box-sizing：border-box

overflow：

控制溢出的容器
- 默认visible
- hidden
- scroll
- auto

三、深入CSS（下）

3.1 块级，行级

块级：

不和其他盒子并列摆放
使用所有的盒模型属性

行级：

和其他行级盒子一起放在一起或拆开成多行
盒模型中的width、height不适用

块级元素：

生成块级盒子
display：block

行级元素：

生成行级盒子
内容分散在多个行盒（line box）中
display：inline

inline-block：

本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
none：排版时完全被忽略

3.1.1 行级排版上下文：

IFC（行级上下文）
如果一个盒子只包含行级盒子就会创建一个IFC
IFC内排版规则：
- 盒子在一行内水平摆放
- 一行放不下时，换行显示
- text-align决定一行内盒子的水平对齐
- vertical-align 决定一个盒子在行内的垂直对齐
- 避开浮动元素

3.1.2 块级排版上下文

Block Formatting Content
某些容器会创建一个BFC
- 根元素
- 浮动、绝对定位、inline-block
- Flex子项盒Grid子项
- overflow值不是visible的块盒
- display：flow-root
BFC排版规则
- 盒子从上到下摆放
- 垂直margin合并
- BFC内盒子的margin不会和外面的合并
- BFC不会和浮动元素重叠

3.1.3 Flex Box

一种新的排版上下文
它可以控制子级盒子的
- 摆放流向（上下左右）
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向对齐
- 是否允许折行

屏幕截图 2023-01-16 112554.png

屏幕截图 2023-01-16 112615.png

屏幕截图 2023-01-16 112643.png

宽度和高度的计算。flex的弹性

Flexibility

可以设置子项的弹性：当容器有剩余空间是，会伸展；容器空间不够时，会收缩

flex-grow 有剩余空间时的伸展能力，或者说对剩余空间的分配配比

<div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>
<style>
  .container {
    display: flex;
  }
  .a, .b, .c {
    width: 100px;
  }
  .a {
    flex-grow: 2;
  }
  .b {
    flex-grow: 1;
  }
</style>

flex-shrink 容器空间不足时的收缩的能力,当元素空间大于分配的空间时，可以压缩一下

<div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>
<style>
  .container {
    display: flex;
  }
  .a, .b, .c {
    width: 400px;
  }
  .a {
    flex-shrink: 0;
      // a为刚性，不能压缩
  }
</style>

flex-basis 没有伸展或收缩时的基础长度

屏幕截图 2023-01-16 114127.png

3.1.4 Grid 布局

二维布局
display：grid；使元素生成一个块级的Grid容器

使用gird-template 相关属性将容器划分为网格

columns:列划分，rows：行划分
grid-template-columns: 100px 100px 200px; 三列
grid-template-rows: 100px 100px 两行
grid-template-columns: 100px 1fr 1fr; 1fr代表一份
grid-template-rows: 100px 1fr

设置每一个子项占哪些行/列
通过数字划分一个区域

1 1 3 3

.a {
  grid-row-start: 1;
  grid-column-start: 1;
  grid-row-end: 3;
  grid-column-end: 3;
}
划分a多占的这么一个区域
可以通过开发者工具去检查网格线在哪

.a {
  grid-area: 2/2/4/4;
}
.b {
  grid-area: 1/1/3/3;
}
重叠部分按书写顺序来

3.1.6 float布局

主要是为了文字环绕图片场景

3.1.7 绝对定位

position属性
- static：默认值，非定位元素
- relative：相对自身原本位置偏移，不脱离文档流
  - 在常规流里面布局
  - 相对于自己本应该在的位置进行偏移
  - 使用top、left、bottom、right设置偏移长度
  - 流内其他元素当它没有偏移一样布局
- absolute：绝对定位，相对非static祖先元素定位
  - 脱离常规流
  - 相对于最近的非static祖先定位，也使用top……相对其进行定位
  - 不会对流内元素布局造成影响
- fixed：相对于视口绝对定位

CSS | 青训营笔记