CSS备注
一、浏览器构成
browser.png
-
User Interface：
用户界面，包括浏览器中可见的地址输入框、浏览器前进返回按钮、书签，历史记录等用户可操作的功能选项。 -
Browser engine：
浏览器引擎，可以在用户界面和渲染引擎之间传送指令或在客户端本地缓存中读写数据，是浏览器各个部分之间相互通信的核心。 -
Rendering engine：
渲染引擎，解析DOM文档和CSS规则并将内容排版到浏览器中显示有样式的界面，也就是排版引擎，我们常说的浏览器内核主要指的就是渲染引擎。 -
Networking：
网络功能模块，是浏览器开启网络线程发送请求以及下载资源的模块。 -
JavaScript Interpreter：
JS引擎，解释和执行JS脚本部分，例如V8引擎。 -
UI Backend：
UI后端则是用于绘制基本的浏览器窗口内控件，比如组合选择框、按钮、输入框等。 -
Data Persistence：
数据持久化存储，涉及Cookie、LocalStorage等一些客户端存储技术，可以通过浏览器引擎提供的API进行调用。
二、css3新单位vw、vh的使用详解
2.1 vw、vh、vmin、vmax 的含义
-
vw、vh、vmin、vmax是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位1，代表类似于1%。
视窗(Viewport)是你的浏览器实际显示内容的区域，换句话说是你的不包括工具栏和按钮的网页浏览器。 -
具体描述如下：
- vw：视窗宽度的百分比（
1vw代表视窗的宽度为1%） - vh：视窗高度的百分比
- vmin：当前
vw和vh中较小的一个值 - vmax：当前
vw和vh中较大的一个值
2.2 vw、vh 与 % 百分比的区别
-
%是相对于父元素的大小设定的比率，vw、vh是视窗大小决定的。 -
vw、vh优势在于能够直接获取高度，而用%在没有设置body高度的情况下，是无法正确获得可视区域的高度的，所以这是挺不错的优势。
2.3 vmin、vmax 用处
做移动页面开发时，如果使用 vw、wh 设置字体大小（比如 5vw），在竖屏和横屏状态下显示的字体大小是不一样的。
由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。
三、属性
3.1 nth-of-type() 选择器
:nth-of-type(n) -- 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.
n 可以是数字、关键词或公式。
-
数字：
p:nth-of-type(2)-- 匹配所有p标签中按顺序第2个。 -
关键词：
odd和even是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。 -
公式：使用公式
(an + b)-- 表示周期的长度，n是计数器（从0开始），b是偏移值。
类似的选择器还有 :nth-last-of-type、 :nth-child 等。
3.1 flex item 上的属性
-
order： 定义项目在容器中的排列顺序，数值越小，排列越靠前，默认值为
0
.item {
order: <integer>;
}
-
flex-basis： 定义了在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间
-
flex-grow： 定义项目的放大比例
默认值为0，即如果存在剩余空间，也不放大 -
flex-shrink： 定义了项目的缩小比例
默认值为1，即如果空间不足，该项目将缩小，负值对该属性无效。
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
.item {
flex-shrink: <number>;
}
- flex： flex-grow, flex-shrink 和 flex-basis的简写
-
align-self： 允许单个项目有与其他项目不一样的对齐方式
单个项目覆盖align-items定义的属性
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
