1、calc(x - y)方法：运算符号前后一定要空格。
例如：width:calc(100% - 200px);
2、pointer-events:none; 让点击无效 穿透当前元素
3、标准盒模型与怪异盒模型
标准盒模型: box-sizing:content-box;
宽高是独立的；内边距是独立的,会把元素撑大；边框是独立
注:宽高不包含内边距和边框
怪异盒模型: box-sizing:border-box;
注：宽高包含内边距和边框
怪异盒模型触发方式:
方式一: 丢失<!DOCTYPE html> 在ie678下触发为怪异盒模型
方式二: 给元素box-sizing:border-box;
4、弹性盒子
<1>弹性盒布局:display:flex;设置为弹性盒子
display:inline-flex;(两个元素会在一行显示)
作用: 控制子集在"主轴"上排列；显示规则:所有的子元素都会在主轴上排列，默认x为主轴；如果设置x为主轴,那y为侧轴，如果设置y为主轴,那么x为侧轴；设置方法: 父元素必须为弹性盒 display:flex;
<2>设置为display:flex;后的影响：
弹性盒,子元素默认在主轴排列,默认x为主轴
父级元素为弹性盒,子元素都能设置宽高
父元素为弹性盒,让子元素在弹性盒中上下左右居中,只需要设置margin:auto;
<3>设置display:flex / inline-flex;对子元素的影响
子元素的float 和 clear 无效
子元素vertical-align(元素垂直对齐方式)无效
<4>容器(父元素)（以下属性都应写在父元素中，以此来改变子元素布局）
属性:
flex-direction:;设置主轴
row 水平方向主轴
row-reverse 水平反向主轴
column 垂直主轴
column-reverse 垂直反向主轴
flex-wrap:;子元素是否换行
nowrap 不换行
wrap 换行
wrap-reverse 反向换行
综合写法 flex-flow:;设置主轴 是否换行 例如：flex-flow:row-reverse wrap;
justify-content:;子元素在主轴上的对齐方式
flex-start 起始位置
flex-end 终点位置
center 居中
space-around 完全自动分配
space-between 两端对齐,中间自动分配
align-items:;子元素在侧轴上的对齐方式
flex-start 起始位置
flex-end 终点位置
center 居中
baseline 基线对齐
stretch 默认位置对齐
align-content:;多行元素在侧轴上的对齐方式,多行元素才有效
flex-start 起始位置
flex-end 终点位置
center 居中
space-around 完全自动分配
space-between 两端对齐,中间自动分配
stretch 默认位置对齐
<5>项目(子元素,以下属性都写在子元素中)
属性:
align-self:;子元素在侧轴上的对齐方式
flex-start 起始位置
flex-end 终点位置
center 居中
stretch 拉伸(此元素不设置宽度或者高度)
auto 默认值
注意:如果父元素有此属性设置,则继承alig-items:;属性设置
order:;数值越大,子元素越靠后（例如：order:2;意思是这个元素放在倒数第二个位置）
vertical-align:;元素垂直对齐方式（针对inline-block 和 inline元素有效）
top 顶部对齐
middle 中间对齐
bottom 底部对齐