一、盒模型：
(1) border:宽度 样式 颜色；
(2) padding: 内边距；
(3) margin: 外边距；（垂直方向会合并）
(4)content;
其它操作：
(1) box-sizing: content-box;默认
border-box;固定元素大小
(2)水平居中：1. margin:0 atuo;（盒子居中）
2. text-align:center;（内容居中）
3.当图片大于父元素：父：text-align:center;
子：margin:0 -100%;
(3)垂直居中：line-height:行高；
(4)盒子阴影：box-shadow
box-shadow:h-shadow v-shadow blur模糊距离 spread阴影尺寸 color inset内阴影
(5)文字阴影：text-shadow
text-shadow:h-shadow v-shadow blur color
二、浮动流：脱标
float:left/right;
注：1.浮动流不区分行内、块级和行内块级。
2.在浮动流内不论行内、块级和行内块级都能设置宽高。
清除浮动：
(1) clear:both; 默认
both; 清除左右浮动；
left; right;
注：使用clear属性后margin会失效。
(2) 外墙法：在中间怎加额外的<div>，在此<div>设置clear:both;
(3) 内墙法：在第一个<div>尾部加一个<div>;
(4) overflow:hiden; 添加到第一个<div>；在IE6中加*zoom:1;
三、定位流：
（1）相对定位relative：不脱标，区分行内块级。
（2）绝对定位absolute：脱标，不区分行内块级。
参考点：1.默认以<body>为参考点。
2.如祖先元素有定位流，则以该元素为参考点。（排除静态定位）
水平居中：left:50%; margin-left:-xxpx;
（3）固定定位fixed：脱标，不区分行内块级。
注：用法和绝对定位相同，区别在于不随滚动条滚动。
（4）静态定位static：默认为静态定位。
四、过渡模块：transition:
(1) transition-property: 设置过渡的CSS名称
(2) transition-duration: 设置过渡时间s/ms
(3) transition-timing-function: 速度曲线
(4) transition-delay: 延时开始时间
缩写：transition:property duration timing-function delay;
多个CSS过渡用法：1) transition:property duration , property duration;
2) transition:all duration;
五、2D转换：
(1) transform:translate(x,y); 平移
(2) transform:scale(x,y); 缩放；单位1=100%
(3) transform:rorate( ); 旋转；单位deg
缩写：transform:rorate(deg) translate(x,y);
注：坐标系会依次变动。
基点设置：transform-origin:0px 0px;
opacity:0; 设置透明度
*perspective:500px; 设置近大远小
原文：https://www.cnblogs.com/Tractors/p/11079094.html