这是我参与「第五届青训营 」伴学笔记创作活动的第2天
去试试看，做得好可能会很艰难但会被记住。做不好也没关系，哪有事事顺利，往往是事与愿违下次做得更好。
一、本堂课重点内容：
CSS概述、是什么以及如何使用，常用布局
二、详细知识点介绍：
css上
一、概念
层叠样式表
二、css语法
选择器加大括号，括号内为多条声明
三、使用
（一）方法
外联、嵌入、内联（主要外联）
（二）工作原理
（三）选择器selector
1.分类
（1）通配选择器*
（2）标签选择器
（3）id选择器
id应该是惟一的
（4）类选择器
class选择器，主要使用的选择器，可以重复使用
（5）属性选择器
主要选择标签有该属性的，用[ ]括属性
也可以选择属性有值的
可以选择属性有出现部分条件的标签
（6）伪类选择器
例如对链接不同状态时设置样式，悬浮状态、访问前后等等，可以理解为是状态伪类
focus为input输入时光标状态
结构伪类
例如设置li标签父级的第一个或最后一个标签
选择器可以叠加生效，例如标签和类选择器同时存在时生效样式，中间不加空格
（7）组合
选择器可以有不同组合，有不同的语法和作用
例如
（8）选择器组
三、颜色-RGB
（一）概念
颜色可以用rgb各颜色数量多少决定最终的颜色，redgreenblue
（二）用法
十六进制或rgb
（三）HSL
区别于rgb的降低难度的取色
s为鲜艳程度、l为明亮程度
例如
颜色关键字
（四）alpha透明度
可以增加rgb和hsl的功能，不透明度，一般不需要a
四、字体
（一）字体样式
指定多个字体，防止设备没有该字体，如果前面字体不存在，则使用下一个字体
（二）通用字体组
网页大部分是无衬线字体，使用建议：一般是英文字体在前，中文字体在后
（三）字体包
web Fonts，需要url引入
（四）font-size
（五）字重
字的粗细长度
一些字体设置不同字重效果一样，因为该字体没有配置相关字重
（六）line-height
行高
（七）其他属性
- 字符间距letter-space
- 单词间距word-space
- text-align设置文本对齐
- white-space处理空白符
normal合并空格、nowarp不换行、pre保留所有空格换行、pre-wrap一行显示不下就换行但保留空格、pre-line合并空格但保留换行
五、css调试
浏览器右键调试偷窥别人的代码
深入CSS
一、选择器优先级
（一）选择器特异度
通过特异度增加选择器复用
（二）继承
一些元素可以继承，一些不可
1.显示继承
利用inherit继承父类属性，让不可继承的变为可继承的属性
2.初始值
3.css求值问题描述
每一个属性都需要经过该流程
二、布局layout
（一）概念
（二）布局方式
1.常规流/文档流
（1）盒子模型
（2）宽
（3）height
（4）padding
（5）border
css可以做常用形状、颜色的技巧
（6）margin
margin：auto实现水平居中
margin collapse
例如h1下有p，可以使用设置两者最大的外边距
（7）box-sizing
区别于content-box，将盒子设置为border以及以内
（7）overfow
内容超出盒子时，对溢出内容的设置
- visible仍显示溢出内容
- hidden截取盒子内容
- scroll盒子内部可滚动内容
三、
（一）块级和行级
例子
（二）display属性
（三）块级排版上下文 249f44236bd0e7e3c1bc1cc436f12e8d.png
（四）Flex Box
2.例子
flex布局，从左到右
4.justify-content
都是设置子项
5.
7.flex语法简写
（五）Grid布局
1.区别
2.划分网格
用grid划分格子
3.grid line网格线
（六）浮动布局
1.positon
（1）relative
（2）绝对定位
（3）fixed布局
或许我走得很慢，但我从来没想过后退怀旧
