dispaly:inline-block：同时拥有行内元素横向排列 和 块级元素能控制宽高的特征，可用于代替float(常用于div的横向排列，同时又需要保持该div的宽高控制，但是inline-block在标签不换行的前提下会产生间隔，同时对IE8以下浏览器不兼容，一般还是用float会比较安全)。
Ps：虽然方便，但是属于 CSS3 兼容性不是很好，所以不建议 PC 端用这个玩意，手机端可以使用。
定义动画：
@keyframes 动画名称{ 0%{ 动画改变的属性} 50%{ 动画改变的属性} 100%{ 动画改变的属性} } /* 中间可以很多细粒度，比如：11%{...} */
Ps：位置放在引用前还是后，无所谓，但推荐放在引用前，标准点。
引用动画：
Animation:动画名称 动画持续时间 动画速率 动画延迟时间 是否循环（infinite为一直循环，数字为循环次数，不写，默认不循环）
如：animation:dh 2s linear 3s infinite;
多个动画：animation:dh 2s linear 3s infinite,dh2 2s linear 3s infinite;
Ps1：一个完整的动画过程：
开始：0----->50
回来：100<--50
Ps2：保持往返状态：0%、100% 状态必须一致。
[条件]{...} 如：
[src]{...} /* 具有src属性的元素 */
[class='pic']{...} /* 具有class='pic'属性的元素 */
img[class]{...} /* 具有class属性的img元素 */
伪元素：
.box:after{...}
.box:before{...}
Ps：在class="box"的元素内部添加元素。after:常用于清楚浮动，不用手写div来清除是因为服务器少渲染一个div，减轻负担。
word-spacing:字与字之间空格的宽度；letter-spacing:字与字之间的间距。
display:none;（不占空间），visibility:hidden;（占空间）。
word-wrap:break-word:强制换行，解决在英文状态下的字符(如：!，感叹号)、字母、数字，超出了 div 的宽度的情景下没有自动换行，中文状态下的字符、中文是会自动换行的。
<map><area /></map>：热区，比如：地图上一块一块标记超链接。
锚点定位：
<a name="a1">位置</a>
<a href="#a1">跳转</a>
H5标签使用：PC端，不要用H5标签，兼容性很差，需要较高的浏览器；但移动端可以用用。
ID选择器：常用于JS获取指定的操作对象，目前的浏览器还都允许用多个相同ID，一般情况下也能正常显示，不过当你需要用JavaScript通过id来控制div时就会出现逻辑错误。
H5新标签——语义化的标签：
H4
H5
优点：将原来div标签换成新的容易识别的名称标签，叫做标签的语义化，标签语义化的目的就是对搜索引擎友好，结合简洁清晰的布局结构，能更容易被搜索引擎抓取，这种符合搜索引擎收索规则的做法，网站的推广便可以省下不少钱，而且可维护性更高，因为结构清晰，十分易于阅读。标签语义化其实就是把你想要表达的东西更容易被搜索引擎理解和重视。
SVG 指可伸缩矢量图形 (图像在放大或改变尺寸的情况下其图形质量不会有损失）。
SVG 使用HTML元素绘制的2D图形。
SVG 图像可通过样式或JS来控制和修改。
SVG 图像可被搜索、索引、脚本化或压缩（比普通图像占空间更小）。
简单来说，是用HTML创建的矢量图形，类似文字一样可以随意更改其大小和颜色，和PS里做的JPG有本质区别，常用于移动端中。
复杂SVG图形直接在AI里绘制好后另存为SVG, 能生成path(路径)标签，要记得另存SVG的时候，要将图形里的所有路径复合（合并一起），免得生成的path太多，控制起来麻烦，框选所有路径，对象→复合选项→建立。
控制svg颜色宽高边框都可以通过css来控制，但是控制其大小有窍门，必须先设置好视区范围——viewBox="x, y, width, height" 定位起始位置x:左上角X坐标，y:左上角Y坐标，width:宽度，height:高度，一般来说XY都设为0。里面的宽高要跟AI里那图标的宽高一模一样，然后在控制svg标签里的宽高即可实现。
以 border 制作三角形技巧（如：下拉菜单中的三角形）：
Canvas——用JS来编写（实际中工作中用的很少）：
固定的分辨率（和PS里一样的位图图形）；
根据JS的判断和运算进行动态绘制，绘制可以来回重复，适合于做游戏（游戏中会应用JS对事件的判断确定如何绘制图形）。
SVG——用HTML编写：
没有固定的分辨率（和AI里面一样的矢量图形）；
纯粹的整片图形绘制，最适合带有大型渲染区域的应用程序（比如百度地图）。
.btn{ width: 200px; height: 50px; background: #ccc; position: relative; } .triangle{ border-top: 15px solid red; border-left: 15px solid #000; border-right: 15px solid #fff; border-bottom: 15px solid #f00; position: absolute; left: 87px; top: 27px;} <div class="btn"> <div class="triangle"></div> </div>
如何CSS绘制一个黑色倒三角形？
.div1{ width:0px; border:5px solid #fff; border-top:5px solid #000 /* border-bottom:5px solid #000 */ /* 正三角形 */ } <div class="div1"></div>
行内元素分为：行内替换元素、行内非替换元素。
img、input 属于行内替换元素。height、width、padding、margin 均可用，效果等于块元素。
其他我们常说的行内元素，这里指的就是行内非替换元素。
CSS中注释只能是/**/，不能//。
如何让一个 div 水平垂直居中？
方法1： .div1{ width:400px; height:400px; border:#CCC 1px solid; background:#99f; position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); } <div class="div1"></div> 方法2： .div2{ width:400px; height:400px; border:#CCC 1px solid; background:#99f; position: absolute; left:0; top: 0; bottom: 0; right: 0; margin: auto; } <div class="div2"></div> 方法3： .div3{ width:400px; height:400px; border:#CCC 1px solid; background:#9f9; position: absolute; left: 50%; top:50%; margin-left:-200px; margin-top: -200px; } <div class="div3"></div>
- CSS 外联样式写在里面还是写在另一个文件*.css，优先级是一样的。
- - id名和class名是区分大小写的
- 选择器中，只有标签选择器不区分大小写
- 属性名和属性值是不区分大小写的
