前端与 HTML | 青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 2 天。一、本堂课重点内容： CSS

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

一、本堂课重点内容：

CSS 概述
CSS 选择器
设置文本样式
CSS 工作原理
CSS 布局
1. 盒模型
2. Flex 布局
3. Grid
4. 定位

二、详细知识点介绍：

在页面中使用CSS
1. 外链（推荐）:<link rel="stylesheet" href="ccs文件的地址">
2. 嵌入：在style标签里写样式：<style></style>
3. 内联（不推荐）：将样式写在html标签里的style属性里面，如：<p style=""></p>
CSS是如何工作的

先加载HTML，HTML解析完成后加载CSS
选择器

除了标签、id、类选择器之外，还有如下的CSS选择器类型

CSS的属性选择器

通过元素的属性或属性值选择元素，格式：[属性名] 或 [属性值="某特定值"] 或 [属性值的正则表达式]

如：[disabled] 或 [type = "password"] 或 [href^="#"]

伪类

（a）状态伪类，如a:link{} （b）结构性伪类，如li:first-child{}

选择器的组合

选择器的组合.png

多个选择器之间用逗号分隔，形成一个选择器组

颜色HSL

H:色相（360°的颜色光谱）

S:饱和度（0%-100%）百分比越高，颜色越鲜艳

L:亮度（0%-100%）百分比越高，颜色越亮
font-family书写小技巧

如果font-family里要写的字体有英文也有中文，则把英文的写在前面，中文的写在后面。（英文碰到英文字体首先匹配，中文碰到英文字体不匹配则接着向后找，找到中文字体匹配；若中文字体在前，英文字体在后，由于中英文都能匹配中文字体，则中文字体首先会匹配全部文字）
well-font

通过@font-face先根据url去找字体样式文件去下载再渲染

line-height

如果没写单位，则默认为是字体的多少倍的大小
处理关于空格符和换行

用css中的white-space属性：www.runoob.com/cssref/pr-t…
选择器的特异度

id选择器 > (伪)类选择器 > 标签
继承

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

一般来说，文字相关的属性大部分都可以继承，盒子元素相关的(如宽度等)是不可继承的

将不可继承的变为可继承的方法：显示继承，将某属性的值写为inherit。如：box-sizing:inherit;
初始值

CSS 中每个属性都有一个初始值。background-color的初始值为 transparent；margin-left 的初始值为 0。

可以使用 initial 关键字显式重置为初始值background-color: initial
CSS求值过程

css计算过程1.png

ccs计算样式2.png

ccs计算过程3.png

布局相关技术

布局相关技术.png 1. 常规流：

常规流.png

*容器有指定高度时，height设置为百分数才有用，否则是不生效的

*padding、margin如果设置百分数，则它是相当于容器宽度的

*当四条边框颜色不同时，四角连接处的颜色是45°切分的。技巧：当把内容宽度高度设为0，且四条边框中的三条设为透明色时，就可以得到一个三角形，调整边框粗细可以变成不同大小的三角形

*使用margin:auto实现左右居中：margin-left:auto;margin-right:auto

*margin collapse:magrin在垂直方向上会有边距合并(折叠)现象。如：上方盒子的下外边距是100px，下方盒子的上外边距是100px，那么这两个盒子之间的外边距不是200px，而是100px(不是将二者相加，而是选择较大的那个边距)，BFC 内盒子的 margin 不会与外面的含并

*box-sizing:boder-box将boder、padding、和内容作为一个整体来看宽度和高度等