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

【理解CSS】

Content

CSS概述

CSS选择器

CSS工作原理

配置文本样式

CSS布局

盒模型

Flex布局

Grid

定位

CSS概述

Cascading Style Sheets 层叠样式表

主要负责定义页面元素的样式，例如设置字体和颜色，设置位置和大小，添加动画效果

CSS选择器

h1 {
    color : white;
    font-size: 14px;(声明)
}

一个选择器加大括号中的内容组成一个规则；

页面中使用css可以选择外链、嵌入和内联三种方式。通常使用外链的方式来应用css。

选择器的类型

通配选择器
标签选择器
id选择器
类选择器
属性选择器
伪类选择器
选择器的组合
- 直接组合
- 后代组合
- 亲子组合
- 兄弟选择器
- 相邻选择器
选择器组

选择器的特异度

即选择器的特殊的程度，来决定规则的优先级。特异度高的选择器会优先被选择渲染

继承

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

<p>This is a <em>test</em> of <strong>inherit</strong></p>

<style>
  body {
    font-size: 20px;
  }
  p {
    color: blue;
  }
  em {
    color: red;
  }
</style>

在CSS中一般与文字相关的属性都是可以继承的，但是和模型相关的属性不能继承

显式继承

即使用inherit属性值设置，使不可继承的元素变为可继承

初始值

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

CSS工作原理

graph TD
加载HTML --> 解析HTML --> 创建DOM树 --> 展示页面

配置文本样式

颜色 RGB或HSL
透明度 alpha
字体 font-family
- 字体族指定多个字体，来适配不同的设备上的浏览器
- Web Fonts
- font-size
- line-height
- white-space

CSS求值过程

CSS布局

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

布局的相关技术包括浮动，绝对定位和常规流，其中常规流包括有行级、块级、表格布局、FlexBox、Grid布局等。

盒模型

有margin, border, padding, width, height等属性

width 用来制定content box的宽度，取值为长度、百分数、auto（由浏览器根据其他属性确定）
height 用来制定content高度，取值为长度、百分数、auto（由浏览器根据其他属性确定），容器有指定的高度时，百分数才生效
padding 指定元素四个方向的内边距，百分数相对于容器宽度
border 指定容器边框样式、粗细和颜色

行级和块级

块级	行级
不和其他盒子并列摆放	行级盒子可以和其他行级盒放在一行
用所有盒模型属性	盒模型中的width和height不适用

行级排版上下文：只包含行级盒子的容器会创建一个IFC，盒子在一行内水平摆放，一行放不下时，换行显示；

块级排版上下文：某些容器会创建一个BFC，盒子从上到下摆放，垂直margin合并，盒子内的margin不会与外面的合并，BFC不会和浮动元素重叠

Flex布局

Flex Box是一种新的排版上下文，它可以控制子级盒子的摆放的方向，摆放顺序，盒子的宽和高，水平和垂直方向的对其，是否允许折行；

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

Grid

Grid一般是将一个页面划分为几个主要的区域，定义这个区域的大小、位置和层次等关系，是一种二维布局

Grid和flex布局的区别：Gird布局是二维布局，而flex是一维布局，只能处理一个维度上的布局，一行或者是一列。

定位

position的属性有：

static 默认值，非定位元素
relative 相对自身原本位置的偏移，不脱离文档流
absolute 绝对定位，相对非static祖先元素定位
fixed 相对于视口绝对定位

[理解CSS | 青训营笔记]

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