Day4:
ps:今天是青训营开始的第四天啦！！！今天主要学习了CSS相关方面的知识，一起来看看吧！！！
层叠样式表
定义页面元素的样式，如字体、位置、大小、动画
最基本的代码需要有：选择器（选择页面中的一些元素）、属性、属性值（这俩合起来叫声明）
使用CSS三种方法：外联、嵌入、内联。（关注点分离开，主要用第一种）
CSS如何工作的？!（一部分）
选择器selector
选择页面中的元素：标签名、类名。、id#，属性【】：可以是某个特定的值，也可以是某个规则（比如a[href^="#"]就代表开头是 # 的元素），节点在DOM树中的位置
* 通配选择器 ：选择所有的
如果不基于标签和属性定位元素
可以通过伪类：状态伪类、结构性伪类etc
状态：就是我之前用的那个鼠标悬停的，会根据某个东西的状态设置样式
结构性：根据DOM中的位置，比如有序列表中的第一位元素或者最后一个儿子（可以更复杂一些，比如在父级中的相对位置，先有这个意识就好，这也是上节课说的，思考最好的办法的一方面体现）
组合
多种办法，比如在那个相对和绝对定位那!
选择器组：h1, h2, .......
颜色
RGB：#ffffff 和 rgb（255，255，255）是一样的前者是十六进制，两位一体，和括号那个一一对应
HSL：Hue色相，saturation饱和度，Lightness亮度——hsl（18，91%， 84%）
颜色的名字直接怼上
alpha透明度：#ff0000ff或者在rgb或者hsl括号里面尾巴再加一个0~1的数字，1代表完全不透明（新版写rgb/hsl就行，老版需要rgba/hsla）
字体
font-family：指定多个字体，假如你的电脑没有这个字体，会向后再选择
有通用字体族，在font-family最后一个位置最好加上通用字体族的其中一个
还有使用web fonts，把字体搞到服务器上@font-face{xxx：xx；url format}
font-size：关键字、长度、百分数
line-height
white-space：空格和换行
调试CSS!
#深入CSS
（上）
多个选择器匹配同一个元素——优先级问题
根据特异度（特殊程度，越特殊越优先）!
id那个更特殊，它优先了!
这个是很好的一个复用的方法
继承。一般和文字相关的可继承，和盒子模型相关的不继承
比如color，自动继承父元素的值，除非显式指定一个值
如果就是想继承，可以用inherit，让原本不可继承的变成可继承的
此外还有初始值的存在（每个属性都有），initial关键字可以重置为初始值
CSS的求值过程
是每个属性要走的过程!
要经过很多处理!
最后得到一个实际生效的值
可以自己实验一下，看看最后计算来的是什么
布局-Layout
基本!
相关技术!
块级就是占了一行位置，而浮动是不占位置的，最简单的就是小米商城那里，左面一个大海报，右边八个小海报在一个盒子里的，通过向左/向右浮动实现
盒子模型!
可以把边框看成真正的边界，然后内边距和外边距就是设定距离的
width!
padding百分数相对于容器宽度，四个边框可以设置不同的样子
交界是斜着的!
margin：auto 实现水平居中
margin collapse，两个盒子上边距下边距都有，中间的距离是上面的下边距或者下面的上边距最大的，而不是相加的
另一种盒子尺寸是!
border-box可能更符合直觉一点
overflow，处理溢出的文字
（下）
还是布局
块和行级的区别：盒模型中一些属性在行级里不能用，比如宽高（可转换）!
然后就是在流里面的区别，行可以好几个挤在一行，块就是占一大行
排版!
可以设置不能拆成两行!
BFC内的排版规则!
块就从上到下，行再从左到右!
#flex布局
Flex Box是一种新的排版上下文（布局），可以控制子级盒子的一些东西
display：flex!
主轴和侧轴!
justify-content!
align-items!
flexibility!可以简写!
#Grid布局
有时候是一个二维的布局方式，不只是向一个方向的流，grid就是来解决这个!
首先是如何划分格子的!
colums就是纵向的一个划分，分成一份一份的!
然后如何把他放到指定位置是通过网格线来指定的!
可以通过线的编号划定区域!
网格线可以通过那个开发者工具来看到!
文档里面会比较详细，学会看文档啊!
上面都是常规流
浮动来咯~
主要用来做文字环绕图片
必要性不是很大，flex和grid是更合适的一种布局
定位来咯~!
realtive!
absolute，找父级!
==学习建议==！！！！！！！！！!
就是：看官方文档，多看好的页面是怎么做的，然后要一直学下去（比如可以隔一段时间看看新出来了啥）
