深入CSS | 青训营笔记CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。

CSS 选择器的特异度

越特殊的选择器优先级越高

CSS 选择器大致分为5类

简单选择器：名称、id、类
组合选择器：特定关系
伪类选择器：特定状态
伪元素选择器：选取元素部分并设置样式
属性选择器：属性or属性值

CSS 继承

继承：某些属性会自动继承其父元素的计算值，除非显示指定一个值。和文字相关的一些属性都是可以继承的，与盒模型相关的一些属性都是不可继承的。
有些属性是不可继承的，但是想继承可以使用inherit

*{
    box-sizing:inherit;
}

html{
    box-sizing:border-box;
}

.some-weight{
    box-sizing:content-box;
}
/*通过一个容器，改变所有元素的属性*/

初始值：每个元素在规范中都规定好的一个初始值，当一个元素不可继承且未被设置属性，会直接使用初始值;或元素要继承，但一层一层下来未继承到，也会使用初始值
- background-color的初始值为transparent
- margin-left的初始值为0
可以使用initial关键字显式重置为初始值
- background-color: initial=background-color: transparent

CSS 求值过程

解析：一个相对比较复杂的过程

image-20230729114855442.png转存失败，建议直接上传图片文件

image-20230729115016255.png转存失败，建议直接上传图片文件

首先浏览器拿到HTML之后会进行一个解析，解析为DOM树。解析过程中会发现一些link、style收集起来作为样式规则。

浏览器为了布局渲染，会找到每一个页面，每一个元素对应的css值。将规则都拿到后，会对规则进行筛选：选择器匹配、符合当前media等。

CSS 布局方式及相关技术

布局（layout）是什么？

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

image.png转存失败，建议直接上传图片文件

布局相关技术

常规流

行级（inline level box）
行级排版上下文:

Inline Formatting Context (IFC)
- 只包含行级盒子的容器会创建一个IFC
- IFC 内的排版规则
  - 盒子在一行内水平摆放
  - 一行放不下时，换行显示
  - text-align 决定一行内盒子的水平对齐
  - vertical-align 决定一个盒子在行内的垂直对齐
  - 避开浮动(float)元素

块级(block level box)

块级排版上下文

Block Formatting Context (BFC)

某些容器会创建一个BFC

根元素

浮动、绝对定位、inline-block

Flex子项和Grid子项

overflow 值不是 visible 的块盒

display: flow-root;

BFC内的排版规则

盒子从上到下摆放

垂直 margin 合并

BFC 内盒子的 margin 不会与外面的合并

BFC 不会和浮动元素重叠

块级(block level box)	行级（inline level box）
不和其他盒子并列摆放	和其他行级盒子一起放在一行或拆开成多行
适用所有盒模型	盒模型中的width、hight不适用
块级元素生成块级盒子	行级元素生成行级盒子、内容分散在多个行盒（inline box）中
body、article、div、main、section、h1-6、p、ul、li等	span、em、strong、cite、code等
display:block	display:inline

表格布局
FlexBox
Flex Box
- 一种新的排版上下文
- 它可以控制子级盒子的
  - 摆放的流向
  - 摆放顺序
  - 盒子宽度和高度
  - 水平和垂直方向的对齐
  - 是否允许折行
Flexibility
- 可以设置子项的弹性: 当容器有剩余空间时，会伸展;容器空间不够时，会收缩。
- flex-grow 有剩余空间时的伸展能力
- flex-shrink 容器空间不足时收缩的能力
- flex-basis 没有伸展或收缩时的基础长度
Grid布局
- 通过text-align决定一行内盒子的水平对齐
- 通过vertical-align决定一个盒子的垂直对齐
display: grid
- 使元素生成一个块级的 Grid 容器
- 使用grid-template 相关属性将容器划分为网格
- 设置每一个子项占哪些行/列

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

盒模型box-sizeing：content-box(大小为width+padding+border)

image.png转存失败，建议直接上传图片文件

每一个元素理解成一个盒子，通常我们定义一个宽度和高度是指在content中的宽和高，指定padding和border需要在内容基础上往外扩一个计算方式

width
- 指定content box的宽度
- 取值为长度、百分数、auto
- auto由浏览器根据其他属性确定
- 百分数是相对于容器的content box宽度
height
- 指定content box的宽度
- 取值为长度、百分数、auto
- auto由浏览器根据其他属性确定
- 百分数是相对于容器的content box宽度
- 容器有指定的高度时，百分数才生效
padding
- 指定元素四个方向的内边距：一个值->四边；两个值->上下左右；四个值->上下左右
- 百分数相对于容器宽度

border

指定容器边框样式、粗细和颜色
三种属性
- border-width
- border-style
- border-color

border : 1px solid #ccc;/*四边*/

border-left : 1px solid #ccc;/*指定边*/
border-right : 2px dotted red;

border-width : 1px 2px 3px 4px;
border-style : solid;
border-color : green blue;

border-left-width : 3px;/*可以任意组合*/
border-top-color : #f00;

四个方向
- border-top
- border-right
- border-bottom
- border-left

当四个边框颜色不同时，可以表示出三角.

.box {
    width: 0;
    height: 0;
    border-top: 100px solid skyblue;
    border-right: 100px solid pink;
    border-left: 100px solid yellow;
    border-bottom: 100px solid peru; 
            }

若只想表示出一个三角，则只需设定需要方向的边框，其余设为transparent.

.box {
     width: 0;
    height: 0;
    border: 100px solid transparent;
    border-top-color: red;
    margin: 50px auto;
        }

margin
- 指定元素四个方向的外边距
- 取值可以是长度、百分数、auto
- 块级盒子水平居中
  - margin：auto；
  - margin：0 auto；
  - margin-left：auto；margin-right：auto；前提是盒子必须指定了宽度
- 百分数相对于容器宽度

深入CSS | 青训营笔记