这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
一、本堂课重点内容：
- 本堂课主要介绍了一些有关三件套之一的CSS相关的知识。
二、详细知识点介绍：
1. css的三种写入方式： 1）内联 2）嵌入 3）外链
2. 选择器
CSS选择器的作用：选择器就是根据不同的需求选出不同的标签。
2.1 标签选择器
是指使用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签制定统一的CSS样式。
/* 一、标签选择器 把某一类标签全部选择出来*/ p { color: green; } div { color: pink; }2.2 类选择器
结构利用class属性调用类
2.3 id选择器
为标有特定id的HTML元素设置指定的样式。
2.4 通配符选择器
选取页面中所有的元素“*”
2.5 伪类选择器
状态伪类
a:link 当前状态
a:visited 访问过后
a:hover 移动过去
a:active 按下去之后
：focus 输入框指点了之后
结构伪类
li: first-child {}
li: last-child {}
3. CSS是如何工作的
4.颜色
alpha设置透明度 HSL 颜色属性
5.字体属性
font: style weight size/height family
h1 { font: bold 14px/1.7 Helvetica, sans-serif; }
6. CSS的调试
右侧点击页面你检查或者f12
7. CSS值、继承等
某些属性会自动继承父元素的计算值。 每个属性都有一个初始值
8. 边框属性
border 颜色 粗细 实线和虚线（样式
border : border-width border-style border-color
style:solid实线 dashed虚线 dotted点线
9.CSS的几种布局方式
块级排版上下文 Block Formatting Context (BFC)·某些容器会创建一个BFC ·根元素 ·浮动、绝对定位、inline-block- Flex子项和Grid子项 overflow值不是 visible的块盒 display: flow-root; Flex Box 一种新的排版上下文 它可以控制子级盒子的:1.摆放的流向(→↓)·摆放顺序2.盒子宽度和高度3.水平和垂直方向的对齐·是否允许折行
Flexibility 可以设置子项的弹性:当容器有剩余空间时，会伸展﹔容器空间不够时，会收缩。 oflex-grow有剩余空间时的伸展能力flex-shrink容器空间不足时收缩的能力,flex-basis没有伸展或收缩时的基础长度
三、实践：
-[jcode](https://code.juejin.cn/pen/7189251841338081332)
body, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; }
四、课后个人总结：
一定要分清楚什么属性可以继承，什么属性不可以继承。布局相关技术要牢牢掌握
