box-sizing:border-box 开启怪异盒模型
boxsizing:content-box 默认标准盒模型

dispaly:flex 设置为弹性盒

display:inline-flex;行内块元素弹性盒

flex-direction主轴排列方式
column 侧重排列
row默认水平方向
row-reverse 翻转横向排列
column-reverse 翻转纵向排列
justify-content:主轴对齐方式
flex-start 默认 顶端对齐
flex-end 末端对齐
center居中对齐
space-berween两端对齐 中间自动分配
space-around 自动分配距离
align-items :侧轴对齐方式
flex-start 侧轴顶端
flex-end 末端对齐
center: 居中对齐
baseline 和flex-start 效果相同
flex-wrap: nowrap 不换行
wrap:换行
wrap-reverse 翻转wrap排列 排列方式从左到右，改变位置

align-content 改变多行子元素在侧轴的对齐方式 行与行之间对齐方式
flex-start 没有行间距 侧轴顶端对齐
flex-end 侧轴底端对齐
flex-center 侧轴中间对齐
spac-between 侧轴两端对齐
space-around 侧轴自由分配距离
stretch 默认值 项目被拉伸以适应容器

子元素的对齐方式：
align-items:stretch:拉伸子元素
align-self:
stretch 拉伸
Center 元素位于容器中心
flex-start元素位于容器开头
flex -end 元素位于容器的结尾

order : 数值 排序

flex 子元素分配剩余空间
flex -grow 拉伸 默认不拉伸 子元素的宽度和小于父元素的时候，拉伸元素
flex-shrink 收缩 0-1 默认值收缩 当子元素的宽度大于父元素宽度时收缩
flex-basis 长度

column-count:3 分成几列

column-width: 列宽

column-gap 列之前的间距

column-rule 列之间添加分割线 边框
-color颜色
-style样式
-width宽度
colimn-span 是否横跨所有列
none不跨列
all横跨所有列

column-fill设置所有列的高度是否统一 版本大多不支持
auto 列高度自适应
balance 所有列的高取值最高列的高度

columns 复合属性
列数 和列宽（大多数时候不写）

columns-break-inside:avoid;防止列中断

flex：0-1 子元素分配剩余空间
flex -grow 拉伸 默认不拉伸 子元素的宽度和小于父元素的时候，拉伸元素
flex-shrink 收缩 0-1 默认值收缩 当子元素的宽度大于父元素宽度时收缩
flex-basis 长度

结构性伪类选择器
X:first-child 匹配子集的第一个元素。IE7就可以支持
X:last-child匹配父元素中最后一个X元素
X:nth-child(n)用于匹配索引值为n的子元素。索引值从1开始
X:only-child这个伪类一般用的比较少，比如上述代码匹配的是div下的有且仅有一个的p，也就是说，如果div内有多个p，将不匹配。
X:nth-of-type(n)匹配同类型中的第n个同级兄弟元素X
X:only-of-type匹配属于同类型中唯一兄弟元素的X
X:first-of-type匹配同级兄弟元素中的第一个X元素
X:nth-last-child(n)从最后一个开始算索引。
X:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素X
X:root匹配文档的根元素。在HTML（标准通用标记语言下的一个应用）中，根元素永远是HTML
X:empty匹配没有任何子元素（包括包含文本）的元素X
X:nth-of-type(n)匹配同类型中的第n个同级兄弟元素X
X:only-of-type匹配属于同类型中唯一兄弟元素的X
X:first-of-type匹配同级兄弟元素中的第一个X元素
X:nth-last-child(n)从最后一个开始算索引。
X:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素X
X:root匹配文档的根元素。在HTML（标准通用标记语言下的一个应用）中，根元素永远是HTML
X:empty匹配没有任何子元素（包括包含文本）的元素X

2、目标伪类选择器 用于锚点

E:target 选择匹配E的所有元素，且匹配元素被相关URL指向

4、否定伪类选择器
E:not(s) （IE6-8浏览器不支持:not()选择器。）
匹配所有不匹配简单选择符s的元素E

3、UI 元素状态伪类选择器
E:enabled 匹配所有用户界面（form表单）中处于可用状态的E元素
E:disabled 匹配所有用户界面（form表单）中处于不可用状态的E元素
E:checked 匹配所有用户界面（form表单）中处于选中状态的元素E
E:selection 匹配E元素中被用户选中或处于高亮状态的部分

E:focus 用户行为选择器 选择匹配的E元素，而且匹配元素获取焦点

css3文本属性
IE浏览器专属的CSS属性需添加-ms-前缀
所有基于Gecko引擎的浏览器(如Firefox )专属的CSS属性需添加-moz-前缀
shadowOpera浏览器专属的CSS属性需添加-0-前缀
所有基于Webkit引擎的浏览器(如Chrome, Safari )专属的CSS需添前缀-webkit-

box-shadow:盒子阴影
h-shadow 水平阴影位置 允许负值
v-shadow 垂直阴影的位置 允许负值
blur 模糊距离
spread 阴影大小
color 阴影颜色
inset 从外层的阴影（开始是）改变阴影内侧阴影

text-shadow:字体阴影

Word-wrap
属性值：
normal 只在允许的断字点换行（浏览器保持默认处理）
break-word 属性允许长单词或 URL 地址换行到下一行。
属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。
Word-break
属性值：
break-all
说明：它断句的方式非常粗暴，它不会尝试把长单词挪到下一行，而是直接进行单词内的断句
Keep-all
说明：文本不会换行，只能在半角空格或连字符处换行。

3、Background-size 背景尺寸
length
规定背景图的大小。第一个值宽度，第二个值高度。

Percentage(%)
以百分比为值设置背景图大小

cover
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域

contain
把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

1、Background-origin 背景原点 背景图片起始显示的位置
padding-box 背景图像填充框的相对位置
border-box 背景图像边界框的相对位置
content-box 背景图像的相对位置的内容框
2、Background-clip 背景裁切
border-box 背景被裁剪到边框盒。 默认的样式
padding-box 背景被裁剪到内边距框。 背景颜色发生了裁剪
content-box 背景被裁剪到内容框 从content开始裁剪（背景颜色和背景图片同时发生变化）

4、css3多背景属性
Eg:p{ background:url(demo.gif) no-repeat; //这是写给不识别下面这句的默认背景图片
background:url(demo.gif) no-repeat ,url(demo1.gif) no-repeat left bottom, url(demo2.gif) no-repeat 10px 15px; //这是高级浏览器的css多重背景，第一个最上面
background-color:yellow; //这是定义的默认背景颜色，全部适合 }

总结
边框图像 border-imager:-url()
border-image-slice(横向向图片的内部偏移的数量（没有单位）纵向象向图像里面偏移的数量（没有单位）
border-image-repeat:stretch（拉伸）repeat（平铺）round(铺满)
border-image-outset 边框图像区域超出边框的量 边框距离内容的距离

圆角边框
border-radius:1 2 3 4
水平半径/垂直半径