理解CSS | 青训营笔记

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

CSS是什么

Cascading Style Sheets，用来定义页面元素的样式，可实现以下效果：

• 设置字体和颜色
• 设置位置和大小
• 添加动画效果
• ......

CSS的实现

• 基本语法

/*选择器 { 属性：属性值 }*/
h1 {
    color: white;
    font-size: 14px;
   }

• 在页面中的使用方法
  • 外链
  <link rel="stylesheet" href="/style.css"
  • 嵌入

  <style>
      div {
          margin:auto;
          }
  </style>
  

  • 内联
  <p style="font-size:14px">Example</p>
• css的工作流程

graph TD
加载HTML --> 解析HTML,同时加载和解析CSS-->创建DOM树,解析好的CSS样式将被添加到DOM节点 --> 展示页面

CSS选择器

作用：

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

基本选择器

选择器	描述
*	通配选择器
h1/p...	标签选择器
#id	id选择器
.class	类选择器
[属性名称]	属性选择器

伪类选择器

• 不基于标签和属性定位元素
• 分类：
  • 状态伪类
  a:link a:hover a:visited a:active a:focus
  • 结构性伪类
  li:first-child li:last-child

组合选择器

名称	语法
直接组合	AB
后代组合	A B
亲子组合	A > B
兄弟选择器	A ~ B
相邻选择器	A + B

选择器的特异度

通过计算选择器的特异度来确定哪条规则生效（特异度越大，优先级越高） $Specificity = ID + Class + E$ 其中，ID为id选择器的数量，Class为类/伪类选择器的数量，E为标签选择器的数量

CSS的继承性和求值过程

在CSS中某些属性会自动继承其父元素的计算值，除非显式指定一个值 （通过设置属性值inherit，可实现显示继承）

CSS中，每个属性都有一个初始值，可以使用initial关键字显示重置为初始值

CSS布局

布局是什么

• 确定内容的大小和位置的算法
• 依据元素、容器、兄弟节点和内容等信息来计算
• 相关技术：
  • 常规流
    • 行级、块级
    • 表格布局
    • FlexBox
    • Grid布局
  • 浮动、定位

盒子模型

Flex Box

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

Grid布局

1、display:grid使元素生成一个块级的Grid容器 2、使用grid-tmplate相关属性将容器划分为网格 3、设置每一个子项占哪些行/列

position属性

属性	描述
static	默认值，非定位元素
relative	相对于视口绝对定位
absolute	绝对定位，相对于非static祖先元素定位
fixed	相对于视口绝对定位

• position:relative
  • 在常规流里面布局
  • 相对于自己本应该在的位置进行偏移
  • 使用top、left、bottom、right设置偏移长度
  • 流内其他元素当它没有偏移一样的布局
• position:absolute
  • 脱离常规流
  • 相对于最近的非static祖先定位
  • 不会对流内元素布局造成影响