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

一、CSS是什么？

用来定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
  
  例如
```
div{
   width: 959px;
   height: 959px;
   background-color: pink;}
```

在页面中使用CSS的方式

外链
嵌入
内联

CSS取值过程

选择器的特异度（Specificity）

高优先级中样式可覆盖低优先级的样式.
选择器的优先级(权重值): id选择器>类选择器>元素选择器>通用选择器.

CSS伪类

CSS 伪类是用来添加一些 '选择器' 的特殊效果(特殊状态)。
伪类实际使用场景举例:
1. 设置鼠标悬停在元素上时的样式。
2. 为已访问和未访问链接设置不同的样式。
3. 设置元素获得焦点时的样式。

继承(某些属性会自动继承其父元素的计算值，除非显示指定一个值）

CSS的继承就是给父级设定了属性，这个父级和它的子级都具有这个属性例如:

<div class="fuji">
<div class="ziji">我是子级</div>
</div>

在给fuji设定字体颜色为红色后，子级中的字体也会变为红色。如果想要子级与父级属性不同，只需要单独对子级设定自己的属性就可以。

注意：有些情况即使没有给子级设定属性，但是还是属性和父级不同，这是因为有些标签的带有浏览器默认样式表中的样式。因为继承的样式没有任何特殊性，任何给元素的样式都会覆盖继承的样式。

布局（Layout）

布局的相关技术：
- 常规流（行级，块级，表格布局，FlexBox,Grid布局）
- 浮动（图片浮动）
- 绝对定位
常规流（Normal Flow）
- 根元素，浮动和绝对定位的元素会脱离常规流
- 其他元素都在常规流之内（in-flow）
- 常规流中的盒子，在某种排版上下文中参与布局
行级排版上下文
- 只包含行级盒子的容器会创建一个IFC
- IFC内的排版规则
- 盒子在一行内水平摆放
- 一行放不下时，换行显示
- text-align决定一行内盒子的水平对齐
- vertical-align决定一个盒子在行内的垂直对齐
- 避开浮动（float）元素
块级排版上下文
- 某些容器会创建一个BFC
- 根元素
- 浮动，绝对定位，inline-block
- Flex子项和Grid子项
- overflow值不是visible的块盒
- display:flow-root
BFC内的排版规则
- 盒子从上到下摆放
- 垂直margin合并
- BFC内盒子的margin不会与外面的合并
- BFC不会和浮动元素重叠
Flex Box
- 一种新的排版上下文
- 它可以控制子级盒子的：
- 摆放的流向
- 摆放的顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许拆行
Flexibility
- 可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩
- flex-grow有剩余空间时的伸展能力
- flex-shrink容器空间不足时收缩的能力
- flex-basis没有伸展或收缩时的基础长度
display:grid
- display:grid使元素生成一个块级的Grid容器
- 使用grid-template相关属性将容器划分为网格
- 设置每一个子项占那些行/列
position属性
- static 默认值，非定位元素
- relative 相对自身原本位置偏移，不脱离文档流
- absolute 绝对定位，相对非static祖先元素定位
- fixed 相对于视口绝对定位
position:relative
- 在常规流里面布局
- 相对于自己本应该在的位置进行偏移
- 使用top,left,bottom,right设置偏移长度
- 流内其他元素当它没有偏移一样布局
position:absolute
- 脱离常规流
- 相对于最近的非static祖先定位
- 不会对流内元素布局造成影响

CSS学习 | 青训营笔记