理解 CSS | 青训营笔记

这是我参与【第四届青训营】笔记创作活动的第2天，今天学习了 CSS 的一些知识点

1. 了解 CSS

1.1 CSS 是什么

介绍：我们在页面中使用 CSS 有几种方式呢？

外链

<link rel="stylesheet" href="/assets/style.css">

嵌入

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

内联

<p style="margin: 1em 0">
   Content 
</p>

1.2 CSS 是如何工作的

如图：

1.3 选择器 Selector

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

1.3.1 类选择器

示例

<h1>
    TODO List
</h1>

<ul>
    <li class="done">Learn HTML</li>
    <li class="done">Learn CSS</li>
    <li>Learn JavaScript</li>
</ul>

<style>
    .done {
        color: gray;
        text-decoration: line-through; // 删除线
    }
</style>

页面效果如下

1.3.2 属性选择器

示例

<label>用户名：</label>
<input value="zhao" disable />

<label>密码：</label>
<input value="123456" type="password" />

<style>
    [disabled] {
        background: #eee;
        color: #999;
    }
</style>

页面效果如下

1.3.3 伪类

伪类是允许用户自行定义某些特定行为的属性

不基于标签和属性定位元素
几种伪类
- 状态伪类
- 结构性伪类

例如

【a 标签的一些伪类】

// 访问前的 a 标签 属性
a: link {
    color: black;
}

// 访问过的 a 标签 属性
a:visited {
    color: gray;
}

// 鼠标经过 a 标签 属性
a:hover {
    color: orange;
}

// 有焦点
:focus {
    outline: 2px solid orange;
}

【还有一些常用的伪类如下】

:first-child // 第一个元素
:last-child // 最后一个元素

1.3.4 组合 Conmbinators

名称	语法	说明	示例
直接组合	AB	满足 A 同时满足 B	input:focus
后代组合	A B	选中 B，如果它是 A 的子孙	nav a
亲子组合	A > B	选中 B，如果它是 A 的子元素	section > p
兄弟选择器	A ~ B	选中 B，如果它在 A 后且和 A 同级	h2 ~ p
相邻选择器	A + B	选中 B，如果它紧跟在 A 后面	h2 + p

1.4 一些基本的 CSS 属性

1.4.1 color

作用：设置颜色

在我们日常开发中，使用较多的是 RGB ，通过红绿蓝三原色去创建我们所希望的颜色，但是，我们在不装插件的情况下直接去看颜色的十六进制是十分不友好的，因为我们一般不知道这个代表的颜色是什么样子的。因此，除了 RGB 外，还有一种方式 HSL 。

如图

用 HSL 的好处的话我觉得在于：当你用的多了，甚至你可以直接填写颜色的 HSL 值，比起 RGB 来说可读性可能会更高一些，这里就不多做阐述了用 RGB 还是 HSL了，主要还是看自己的爱好。

补充

我们在使用 RGB 的时候可以用 rgb(x,x,x) 或者 rbga(x,x,x,x) 这里的 a 代表的是开启 alpha 通道，会比用 rgb 的时候多一个参数，这个参数是透明度，范围是 0 -1

1.4.2 font-family

作用：设置字体

一般来说我们在设置字体的时候都最好设置一个通用的字体组，这样在你设置的其他字体都无法使用的情况下还可以使用默认的字体

扩充： Web Fonts

我们可以通过 @font-face {} 的方式去请求服务器上的字体，然后进行渲染

<h1>
    Web Fonts
</h1>

<style>
    @font-face {
        font-family: "Megrim";
        src: url(https://fonts.gstatic.com/s/megrim/v11/....)format('woff2')
    }
    h1 {
        font-family: Megrim, Cursive
    }
</style>

1.4.3 font-size

作用：设置字体大小

关键字
- small 、medium、large
长度
- px、em
百分数
- 相对于父元素字体大小

1.4.4 font-weight

作用：设置字体粗细程度

范围：100 - 900

具体的效果如下

其中

400 可以写成 normal
700 可以写成 bold

1.4.5 line-height

作用：设置行高

1.4.6 text-align

作用：设置文字位置

一般地，text-align: center 让文字居中显示

1.4.7 spacing

这里有两个 spcing 属性

1.4.7.1 letter-spacing

作用：设置每个字母之间的间距

1.4.7.2 word-spacing

作用：设置每个单词之间的间距

1.4.8 white-space

作用：指定元素内的空白怎样处理

常用的：

不换行 white-space:nowrap;

1.4.9 text-indent

作用：首行缩进n个字符

常用的：

首行缩进两个字符 text-indent: 2em

2. 深入 CSS

2.1 理解权重

注意：这里的权重相加并不是二进制！

2.2 理解继承

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

显式继承

box-sizing 本身是不可继承的，inherit 表示显式的从父级继承，可以让一个原来不能继承的变成可继承。

2.3 初始值

CSS 中，每个属性都有一个初始值
- background-color 的初始值为 transparent
- margin-left 的初始值为 0
可以使用 initial 关键字显式重置为初始值
- background-color: initial

2.4 CSS 的求值过程

2.5 布局（Layout）是什么

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

2.5.1 布局相关技术

常规流
- 行级
- 快级
- 表格布局
- Flex
- Grid
浮动
绝对定位

2.5.2 一个标准的盒子

width

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

height

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

padding

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

margin

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

border

指定容器边框样式、粗细和颜色

扩充

2.6 块级 VS 行级

display

block 块级盒子
inline 行级盒子
inline-block 本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
none 排版时完全被忽略

2.7 常规流 Normal Flow

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

2.7.1 行级排版上下文

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

2.7.2 块级排版上下文

Block Formatting Context ( BFC ) 【面试重点】
某些容器会创建一个 BFC
- 根元素
- 浮动、绝对定位、inline-block
- Flex 子项和 Grid 子项
- overflow 值不是 visible 的快盒
- display: flow-root

2.7.3 BFC 内的排版规则

盒子从上到下拜访
垂直 margin 合并
BFC 内盒子的 margin 不会与外面的合并
BFC 不会和浮动元素重叠

2.7.4 Flex Box 是什么

一种新的排版上下文
它可以控制子集盒子
- 摆放的流向（→，←，↑，↓）
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许折行

2.7.5 一些 Flex 盒子中的属性

值	描述
flex-grow	一个数字，规定项目将相对于其他灵活的项目进行扩展的量。【有剩余空间时的伸展能力】
flex-shrink	一个数字，规定项目将相对于其他灵活的项目进行收缩的量。【容器空间不足时收缩的能力】
flex-basis	项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。【没有伸展或收缩时的基础长度】
auto	与 1 1 auto 相同。
none	与 0 0 auto 相同。
initial	设置该属性为它的默认值，即为 0 1 auto。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。
justify-content	水平方向对齐
align-items	垂直方向对齐

2.7.6 Grid 布局

<div class="grid">
    <div class="column1">column1</div>
    <div class="column2">column2</div>
    <div class="column3">column3</div>
    <div class="column4">column4</div>
    <div class="column5">column5</div>
    <div class="column6">column6</div>
</div>

2.7.6.1 grid-template-column

.grid {
    display: grid;
    grid-template-column: 1fr 2fr 1fr; // 一行三个元素占比为1:2:1
    gap: 24px; // column-gap: 24px 和 row-gap: 24px;
}

效果：

2.7.6.2 grid-template-areas

如果想要这样的布局：

<div class="layout">
    <header>头部</header>
    <aside>侧边栏</aside>
    <main>内容</main>
    <footer>底部</footer>
</div>

.grid {
    display: grid;
	grid-template-areas: "header header header"
        "sidebar content content"
        "footer footer footer"
}
header {
    grid-area: header;
}
asider {
    grid-area: sidebar;
}
main {
    grid-area: content;
}
footer {
    grid-area: footer;
}

2.7.6.3 对齐

.grid {
    justify-items: center(居中) | end(靠下);
    align-items:center(居中) | end(靠右) | space-between(两端对齐);
    
    align-content: center | end; // 整体内容
    justify-content: space-between;
}

2.8 position

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

2.8.1 absolute

脱离常规流
相对于最近的非 static 祖先定位
不会对流内元素布局造成影响

总结

本文对于 CSS 做了较为多的介绍，主要是为了帮助大家包括我自己能更好的了解CSS，并不是完完全全地介绍各个属性及其作用。

CSS里面的水其实很深，不过对于日常开发来说，这些加上大家的基本知识是基本够用的。

如果你对 CSS 感兴趣也可以自行去深入了解 ~

理解 CSS | 青训营笔记

理解 CSS | 青训营笔记

1. 了解 CSS

1.1 CSS 是什么

1.2 CSS 是如何工作的

1.3 选择器 Selector

1.3.1 类选择器

1.3.2 属性选择器

1.3.3 伪类

1.3.4 组合 Conmbinators

1.4 一些基本的 CSS 属性

1.4.1 color

1.4.2 font-family

1.4.3 font-size

1.4.4 font-weight

1.4.5 line-height

1.4.6 text-align

1.4.7 spacing

1.4.7.1 letter-spacing

1.4.7.2 word-spacing

1.4.8 white-space

1.4.9 text-indent

2. 深入 CSS

2.1 理解权重

2.2 理解继承

2.3 初始值

2.4 CSS 的求值过程

2.5 布局（Layout） 是什么

2.5.1 布局相关技术

2.5.2 一个标准的盒子

2.6 块级 VS 行级

2.7 常规流 Normal Flow

2.7.1 行级排版上下文

2.7.2 块级排版上下文

2.7.3 BFC 内的排版规则

2.7.4 Flex Box 是什么

2.7.5 一些 Flex 盒子中的属性

2.7.6 Grid 布局

2.7.6.1 grid-template-column

2.7.6.2 grid-template-areas

2.7.6.3 对齐

2.8 position

2.8.1 absolute

总结

2.5 布局（Layout）是什么