这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
今天来总结下CSS的笔记，除了课堂知识点外还做了一些面试题，加入了对应的思考，应该算是温故知新了。
课堂知识点
graph TD
css基础-->选择器
css基础-->选择器性质
css基础-->盒模型
css基础-->常规流
知识点详细
css引入
外部引用或直接写html里。
<link type="text/css" rel="styleSheet" href="CSS文件路径" />
<style type="text/css"> @import url("css文件路径"); </style>
<style type="text/css"> div{ width: 65px; height: 50px; background: green; } </style>
<p style="color:red;font-size:30px;"></p>
选择器
- id选择器：#id名
- 类选择器：.class名
- 伪类选择器：:hover
- 标签选择器：div
- 通配符：*
还有一些实践的时候见到的
- 相邻兄弟选择器: p+h1
- 第一个子选择器：li>ul
- 第n个字选择器：p:nth-child(n)
- 后代选择器：div ul
选择器性质
- 优先级
有时候同一个标签会被多个选择器选中，当属性冲突的时候，则按选择器优先级来。总结一句就是，越具体的选择器级别越高。其中id>（伪）类>标签，量化分析的话，就是统计这三个类别的个数个数，从前往后按百分位，十分位，个位加一起，数字大的优先级大。
- 继承性
子元素的某些元素（文字属性、光标属性、可见性）默认会继承父元素属性，有些不继承（盒模型相关属性），可使用inherit来强制继承。
盒模型
感觉盒模型是那种初看没什么东西，很简单，但是实际上手幺蛾子一堆的知识，细节太多了，也不好讲。就上一张图吧。盒模型本身是文档渲染的常规布局，包括block\inline\inline-block。即网页呢内容都会放到一个个如下图的盒子里，都具有盒子的一些属性。
平常的width和height都是指content的宽高，加入box-sizing: border-box;后即代表加入padding和border后的宽高
常规流（文档流）
文档排版布局的方式。网页上的元素默认按照盒模型进行排列，而盒模型又可以分为块级元素和内联元素。 块级元素：p、h1、div、 ul、ol、li、 table、 form；内联元素：input、 a、 img、 span。可以通过display属性更改盒模型类别。
而块级元素采用BFC排版，即从顶部开始Box会在垂直方向，一个接一个地放置。而内联元素采用IFC排版，即从块的顶部开始，一个接一个地水平摆放。
元素也可以脱离原本的位置，人为的指定ta的位置，即脱离常规流。使用position属性实现。当属性值为absolute（绝对定位），则彻底脱离文档，且不在原位置留下占位，用left、top、right、bottom来指定距离有position父级的位置，不指定则相当于没脱离文档流（父级元素用）。当属性值为relative（相对定位）时，彻底脱离文档，且不留占位符，此时left、top这些属性相对原来位置。当属性为none时，相当于删除元素。当为fixed时，相对视窗定位。
visibility:hidden只是不可见，并不删除元素，不修改文档流
还有一个零碎知识点，浮动用来指定元素排版到容器右边或左边，使用float：left/right即可。
课后总结
css还是得多写，要不然学不到多少属性，学到的属性也不知道怎么用。不算太难，就是混乱。
