HTML盒模型与尺寸
浏览器把每个元素都看成一个矩形盒子，由4部分组成：content内容（文字/图片）、padding内边距（内容与边框之间）、border边框、margin外边距（盒子与盒子之间）。
**box-sizing属性：**控制元素尺寸计算规则的一个属性。content-box ，默认值/标准盒模型；border-box，常用/IE盒模型，怪异模型盒。
标准盒模型/IE盒模型的区别：设定的width和height，到底包不包含内边距（padding）和边框（border）。标准盒模型：宽高不包含padding和border（只管内容区的大小）；IE 盒模型：宽高包含padding和border（管整个盒子的外框大小）。
项目中通常可以使用以下CSS代码进行全局重置：
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit; /* 让所有元素及伪元素都继承 border-box */
}最常用全局样式（项目必写）：
* {
margin: 0;
padding: 0;
box-sizing: border-box; /* 让所有盒子宽度好计算 */
}尺寸分两大类：固定单位（px） + 相对单位（%/em/rem/vw/vh）
px：物理像素（绝对尺寸）；
%百分比：（相对父元素宽度）；
em/rem（字体相对单位），em：相对于自身font-size，默认 1em=16px，rem：相对于html根标签font-size，移动端常用；、
vw/vh（视口单位，相对于浏览器可视区），1vw=可视宽度1%，全屏布局常用。
HTML标准文档流
标准文档流，普通流/正常流，normal flow，默认浏览器排版规则，元素天生在标准流里，浮动、定位会脱离标准流。
页面默认从上到下、从左往右排布，分两类排布规则：
1、块级元素 (block)：垂直自上而下挨个独占一行，div、p、h1、u，默认：独占整行，从上往下依次堆放，默认宽度100%占满父容器。
2、 行内 / 行内块 (inline/inline-block)：水平从左到右同行排列，span、a、img、input，在同一行从左往右排，一行放不下自动换行，尺寸由内容决定。
标准流三大特性：默认布局，不用加任何CSS，原生生效；元素位置互相挤占、互相影响：A元素位置变了，后面元素跟着挪位；遵循盒模型规则，margin正常塌陷、margin正常合并（上下外边距重叠）。
块级元素、内联元素和行内块
块级元素，display:block，独占一行，自动换行，width/height/padding/margin 全都生效（盒模型完整），默认宽度：撑满父容器100%。
内联元素，display:inline，同行排列，不换行，宽高设置无效 width/height不生效，大小由内容撑开，左右padding、左右margin生效；上下padding、上下margin无效。
行内块，display:inline-block，并排一行，默认缝隙（换行空格造成），width、height、padding、margin全部正常生效。
CSS选择器
CSS Selector：
1、基本选择器：元素选择器、类选择器、ID选择器和通配符（*）。
2、组合选择器：后代选择器（div p，div 里的所有 p）、子选择器（ul > li，直接子元素）、相邻兄弟（h1 + p，紧接在 h1 后的 p）、通用兄弟（h1 ~ p，h1之后的所有p）。
3、属性选择器：attr：有该属性、attr=value：属性值等于、attr\^=val：属性以val开头、attr$=val：属性以val结束、attr\*=val：属性包含val。
4、伪类选择器：a:hover、a:active、:focus、:nth-child(n)、:not(.active)。
5、伪元素选择器：p::before { content: ""; }、p::first-line { color: gray; }、::after（在后面插入内容）、::selection（选中文本）。
DOM提供：document.querySelector('CSS选择器')
选择器优先级：
!important > 行内样式 > ID选择器 > 类/属性/伪类 > 标签/伪元素 > 通配符