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

一、了解CSS

1.1　CSS是什么

CSS是Cascading　Style　Sheels的缩写，CSS在前端中用于定义页面元素的样式：

• 设置字体和颜色

• 设置位置和大小

• 添加动画效果

1.2 在页面中使用CSS

在页面中使用CSS通常有三种方式：

• 外链式（常用）：<link rel="stylesheet" href="/assets/style.css">

• 嵌入式：

<style>
    li { margin : 0 ; list-style : none ; }
    p { margin : lem 0 ; }
 </style>

• 内联式（不建议）：<p style="margin :lem 0">Examgle Content </p>

1.3 CSS是如何工作的

当打开一个网页时，浏览器会加载并解析相应HTML，生成对应的DOM树，同时加载HTML中的CSS并解析，根据解析后的结果为对应的DOM节点添加样式从而得到渲染树，最后生成页面。

1.4 CSS具体构成

h1{
    color: write ;
    font-size: 14px ;
  }

其中，h1称为选择器；color以及font-size是属性，其后分别为对应属性值；font-size: 14px ; 这一整体称为声明。

选择器

• 找出页面中的元素，一边给他们设置样式
• 可使用多种方式选择元素
• 按照标签名、类名或id
• 按照属性
• 按照DOM树中的位置

1. 通配选择器

*可以匹配所有元素使其满足*内的样式要求。

<style>
   *{
    color: red ;
    font-size: 20px ;
    }
</style>

2. 标签选择器

通过标签选择出HTML中使用此标签的所有内容满足对应样式要求。

<style>
    h1 { 
        color: orange ; 
    }
    p { 
        color: gray ;
        font=size: 20px ;
    }
 </style>

3. id选择器

在h1中设置id属性并赋予唯一的属性值，之后通过#属性值进行选择添加声明。

4. 类选择器

在标签中添加class属性并赋予属性值，之后通过.属性值添加声明。

5. 属性选择器

通过元素的属性或属性值来选中该元素添加样式，也可以选择某些具有特殊性的元素，例如a[href^="#"]表示选择所有属性值开头为#的元素添加样式；a[href$=".jpg"]表示选择所有属性值结尾为.jpg的元素添加样式。

伪类选择器

1. 不基于标签和属性定位元素
2. 常见几种伪类：

• 状态伪类
• 结构性伪类

状态伪类：处于某种特定状态时才会被选中，例如一个超链接在默认状态下时是一种样式，当被访问过后会变成另一种样式。

结构性伪类：根据在DOM树中的某一位置的DOM节点进行选择。

组合选择器

选择器组

将所有需要添加样式的标签罗列在一起并通过,隔开，成为一个选择器组。例如：

二、深入CSS

2.1 选择器的特异度

根据不同选择器的特异度，CSS不同类别样式有各自的优先级：

1. 在属性后面使用！importent会覆盖页面内任何位置定义的元素样式
2. 内联样式（权重：1000）
3. id选择器（权重：100）
4. 类选择器（权重：10）
5. 标签选择器（权重：1）
6. 通配选择器
7. 继承（权重：0）

特别注意：针对同一元素的同级别选择器后者会覆盖掉前者的样式。

2.2 继承

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

对于某些子元素不能直接继承父元素的值（例如宽度）可以通过inherit进行显式继承。

2.3 CSS初始值

• CSS中，每个属性都有一个初始值，例如：

1. background-color的初始值为transparent
2. margin-left的初始值为0

• 可以使用initial关键字显式重置为初始值，例如：

1. background-color : initial

三、布局

3.1 布局是什么

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

3.2 布局的相关技术

通常有三种不同的布局方式：

• 常规流（文档流）：行级、块级、表格布局、Flex Box、Grid布局
• 浮动：给某些元素添加浮动效果，例如：图片浮于文字上方
• 绝对定位：赋予某些元素确定的位置，覆盖掉常规流中的位置

3.3 布局样式

盒子模型

盒子模型是CSS的基础，将每一个元素理解成一个个盒子，每一个盒子包括width（宽）、height（高）、padding（内边距）、border（边框）、margin（外边距）以及content（中心内容）

Width

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

Height

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

padding

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

padding取值时有四个方向，当同时取值时按照顺时针方向依次对padding-top、padding-right、padding-bottom、padding-left进行赋值。

border

• 指定容器的边框样式、粗细和颜色
• 三种属性：border-width、border-style、border-color
• 四个方向：border-top、border-right、border-bottom、border-left

注：通常指定 box-sizing= border-box

margin

• 指定元素的四个外边距
• 取值可以是长度、百分数、auto
• 百分数相对于容器宽度

块级 VS 行级

块级

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

行级

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

块级元素&行级元素

块级元素可以生成块级盒子，例如：body、article、div、main、section、h1-6、p、li等等；

行级元素生成行级盒子，内容分散在多个行盒（line box）中 ，例如：span、em、strong、cite、code等。

通过display可以将行级与块级进行转化：

• display ：block：转为块级
• diaplay : inline：转为行级

display属性

常规流

• 根元素、浮动和绝对定位的元素会脱离常规流
• 其他元素都在常规流之内（in-flow）
• 常规流中的盒子，在某种排版上下文中参与布局

1.行级排版上下文

• 名称：Inline Formatting Context(IFC)
• 只包含行级盒子的容器回创建一个IFC
• IFC内的排版规则：

1. 盒子在一行内水平摆放
2. 一行放不下时，换行显示
3. text-align决定一行内盒子的水平对齐
4. vertical-align决定一个盒子在行内的垂直对齐
5. 避开浮动（float）元素*

2.块级排版上下文

• Block Formatting Context(BFC)
• 某些容器会创建一个BFC：

1. 根元素
2. 浮动、绝对定位、inline-block
3. Flex子项和Grid子项
4. overflow值不是visible的快盒
5. display ：flow-root ；

• BFC内的排版规则：

1. 盒子从上到下摆放
2. 垂直margin合并
3. BFC内盒子的margin不会与外界的合并
4. BFC不会与浮动元素重叠

Flex布局

1. Flex Box是什么

• 一种新的排版上下文
• 可以控制其 子级盒子：

1. 摆放的流向（右、左、上、下）
2. 摆放顺序
3. 盒子的宽度和高度
4. 水平和垂直方向的对齐
5. 是否允许折行

2. Flexibility

Grid布局

display：grid

• diaplay: grid使元素生成一个块级的Grid容器
• 使用grid-template相关属性将容器划分为网格
• 设置每一个子项占据的行/列

绝对定位

position属性

1. static: 默认值，非定位元素
2. relative: 相对自身原本的位置进行偏移，不脱离常规流
3. absolute: 绝对定位，相对于非static祖先元素定位
4. fixed: 相对于视口绝对定位

相对定位

绝对定位

四、学习建议

1. 充分利用MDN和M3C CSS规范

2. 保持好奇心，善用浏览器的开发者工具

3. 持续学习，CSS新特性还在不断出现