1.Css是什么
文档相当于一个主干，通过CSS的描述，让人看到一整颗树，可以更好的规划、美化和布局树枝，树叶，花朵，果实，让人看到一个根繁叶茂的大树，很美。
CSS是可以影响一个或者一组文档的表现样式，是层叠（替代、重写）格式表的意思
2.元素与元素框
- 页面中显示的内容称为元素，元素显示在浏览器为它生成的元素框中
- 根据元素框中的内容提供者，可以将元素分为两大类，置换元素与非置换元素，置换元素是元素框内容由外部资源提供，元素框就是占位符<img><input>
- 非置换元素的元素框内容用户提供，浏览器生成，如<p><span>等
3．元素的显示方式
3.1 元素类型
- 块级元素、行内元素和行内块元素
- 块级元素：生成一个填满父级内容区的元素框，且两侧不能有其他元素，如<div><p>
- 行内元素：在一行文本内生成元素框，不打断所在行，如<a></span>
行内块元素：在一行文本内生成元素框，不打断所在行，但是支持宽高变化，如<img>
3.2 display属性
每个元素都可以通过 style=”display:type”控制它的显示类型，即生成什么样的元素框
Inline默认 行内元素 span a
- Block 块级元素 div p
- Inline-block 行内块元素 img
- List-item 块级元素 li
- Table 表格元素
- Flex 弹性元素
- Grid 网格元素
4.css应用到html上
- Link导入
- @import 指令
- Style=属性 直接在元素前面加
- <style></style> 直接在文档内部定义
5.css文档的内容
5.1样式规则
选择符：声明块即 selector{property:value;…}的形式
6.媒体查询
设置浏览器使用指定的样式表的设置
6.1使用场景
- Link <link media=”screen,print”>
- Style <style media=”screen,print”>
- @improt @import url(…)screen,print;
- @media @media screen,print {…}
6.2媒体类型
- All 默认就是ALL
- Print 打印机
- Screen 屏幕，如浏览器等用户代理
- Projection 幻灯片
6.3媒体描述
- 媒体描述符与css样式声明非常类似，如 min-width:500px
- 与css不同之处在于媒体描述符没有值，直接指定如print and (color)
- 多个媒体描述符之间使用逻辑关键字连接，如and和not
- And表示多个媒体描述符必须同时满足，not则是整个查询取反，且必须写在and前面
- Max-width:浏览器显示区域宽度，与关，通常用于pc端
- Max-device-width，设备分辨率的最大宽度，通常用于移动端