这是我参与「第四届青训营 」笔记创作活动的的第2天
一、本堂课重点内容：
理解css
二、详细知识点介绍：
- 一些概念
- 使用css的三种方式
- 外链：css代码放在一个文件里，用link标签引入进来
- 嵌入：css代码嵌入在html中
- 内联：css代码直接写在标签的style属性里面
- 选择器
-
可以按照标签名，类名，id号，属性或者在NOM树中的位置选择元素
-
可以用*{}实现统配选择器，匹配所有标签
-
用.{}类名实现类选择器
-
用#id号{}实现id选择器
-
[属性名]实现属性选择器，选择出包含该属性的标签，或者选择出包含该属性且等于某个条件的标签
-
伪类选择
- 状态伪类
- 根据一个标签的不同装的状态定义不同样式
- 结构伪类
- 根据在父级节点的相对位置来选择元素，定义不同样式
- 状态伪类
-
组合选择
-
选择器组可以一次性选择多个标签
-
- 表示颜色
- rgb(X,X,X)：三个值分别表示红色，绿色，蓝色
- hsl(X,X,X):三个值分别表示色相，饱和度，亮度
- 用字符串指定颜色：red，blue..
- alpha不透明度：范围 0-1
- 设置字体
-
一般用font-family设置
-
font-famliy一般会给出多个字体，称为字体族，因为想要的字体用户不一定有，每一个字体族在最后都必须给出一个通用字体族，浏览器会从已有的字体中找一个与通用字体族风格相似的字体
-
通用字体族：一种字体的分类/风格
-
在字体族中如果像中英文使用不同的字体，英文字体应该写在中文字体前面。因为浏览器找到了字体就不会继续遍历字体族，如果先找到了微软雅黑，中英都用这个。如果先找到了英文的字体，因为英文字体里没有中文字符，所以显示中文时会继续在字体族里找能表示中文的字体，从而实现中英文不同字体的效果
-
可以使用font-face下载指定的字体来用
-
- 设置文字的一些参数
- font-size：字体大小
- font-style：文字斜体
- font-weight：文字粗细
- line-height：行高
- 当不同的选择器选择了同一个标签，特异度高的选择器的属性覆盖特异度低的选择器的属性
- 比较特异度可以直接把id，类，标签个数组成的十进制数进行比较，因为id，类，标签特异度是递减的
- 可以利用这个特性实现复用，写一些基础的样式，遇到特殊的就定义一个类，实现特殊样式的覆盖
- 继承
- 某些属性自动继承父元素的值，除非显示指定一个值
- 这里的某些属性一般指文本的一些属性（自动继承父类计算值）。如果是跟模型相关的属性，是需要显式继承的
- css求值过程
- 先从css代码找到对应的选择器获得声明值
- 通过比较优先级找出一个层叠值
- 层叠值可能为空，那么会使用css的默认值，最终获得指定值
- 在不用实际渲染的情况下，将一些相对的指定值转化为计算值
- 在渲染后将一些相对值转化为使用值
- 最后通过取整或者一些限制，使用值转化为实际值
- 布局
-
content box模型
-
border box模型
-
两种模型比较
-
当给边界设置不同颜色时，会发现边框是斜着的
-
如果我们再把width和height设置为0
-
如果再将其余三角形设置为透明，可以得到一个三角形
-
关于margin两个特点
-
margin：auto可以实现水平居中
-
一个标签有下边距，另一个标签有上边距，当两个标签叠在一起时，边距不会简单相加，而是取较小值
-
-
可以通过overflow属性，控制溢出box的文本如何展示
-
行级盒子块级盒子
-
三、课后个人总结：
后面就听不懂了..