本文纯属个人笔记，如有错误谢谢指出！
①边框属性：border-bottom: 1px solid #D8D8D8;
②div内元素水平居中：margin: 0 auto;
③文字垂直居中：line-height: 26px; (前提：行高为26px,可配合无序列表使用)
④不换行块级元素：display: inline-block;
⑤块级元素居中：vertical-align: middle;(设置④后使用可居中)
⑥增加右内边距：padding-right: 10px; (右边元素偏移、产生距离) 其中padding:1px 1px 1px 1px; (顺时针转 上->右->下->左)
⑦去除超链接下划线：text-decoration: none;
⑧去除li前圆点：list-style:none;
⑨浮动div：float: left; (常用)
⑩元素堆叠次序：z-index:-1; (仅能在定为元素下使用)
img {
position:absolute;
left:100px;
top:0px;
z-index:-2;
}①①清除边框自带1.8px并重设：
border: none; /*mark-去除边框自带2px 同时需要将width与height相应 -2px*/
border:1px solid #C9C9C9;
①②文字置后,seo优化：text-indent: -1000em; /*mark-将文字滞后，用于seo优化--->将div换成h1并在其中写文字<h1>我被隐藏了</h1>*/
①③鼠标悬浮触发：xxx:hover;
.nav ul li:hover { background: #0266A3; } .nav ul li:hover a{ color: white; }
①④隐藏溢出(如图片溢出)：overflow:hidden;
①⑤让一个div在另一个div中居中
<div><div style="margin-left:auto; margin-right:auto;"></div></div>
①⑥清除浮动
.clearfix::before, .clearfix::after{ content: ""; height: 0; line-height: 0; display: block; visibility: hidden; clear: both; /*！！清除两边*/ }
①⑦防止边框超出百分比溢出，以边框作为边界一部分
分析：即如果不设置，我设置了宽度为80px,在设置边框就会造成整个块为80px+边宽度，设置后就依旧是80px
box-sizing: border-box; -webkit-box-sizing: border-box;
①⑧box-shadow突出层次感
box-shadow: 0 2px 3px rgba(0,0,0,0.15);
效果对比如下：
<有加---------没加>
①⑨透明遮盖层实现，能看不能动
background-color:#000;opacity:0.01;text-align:center
②⑩相对定位与绝对定位的联合使用
<div style="border:1px solid #000;position:relative">
<div style="position: absolute;top: 10px;left: 50px">
<div>标题</div>
<div>评论内容！！！！！</div>
</div>
<canvas id="myCanvas" width="500" height="200" style="border:1px solid #000;z-index:-1"></canvas>
</div>
注：如果最上层div不加position:relavite;则下一层div会相对于 window位置
②①悬浮突出效果
.img{
transition: transform 0.25 s ease;;
}
.img:hover {
transform: scale( 1.2 );
-ms-transform: scale( 1.2 );
-webkit-transform: scale( 1.2 );
-moz-transform: scale( 1.2 );
}效果图：http://y.dobit.top/upload/demo/20150718202131228515/scale.html