1.在 Chrome 浏览器的 Elements 里面选中某个元素，按 h 可以隐藏该元素。
2.谷歌的给打印内容设置样式
console.log('%c你%c是%c谁','font-size:20px;color:pink;','color:green','color:blue');
3.
在 Chrome 的 Sources 里面的里面，ctrl + o 可以打开某个 JS 脚本，并且可以直接修改它，修改的内容在不刷新的情况下是生效的。
4.让一个块始终在屏幕的正中间
.box{
100px;
height: 100px;
border:1px solid red;
position: fixed;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
5.把一个块定位到他父级的中心
<style> .con{ width: 300px; height: 300px; border: 1px solid red; position: relative; } .box{ width: 100px; height: 100px; border:1px solid red; position: absolute; margin: auto; //这句是重点，下面的定位四个0，原理就是让 box 自己既要往左也要往右，既要往上也要往下。这时候它就不知所措了，只好待在中间。 left: 0; right: 0; top: 0; bottom: 0; } </style> </head> <body> <div class="con"> <div class="box"></div> </div> </body>
6.css 巧妙实现分隔线的集中方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .con{ height: 1px; border-top: 1px solid #ccc; text-align: center; margin-top: 10px; } .con span{ position: relative; top: -13px; background: #fff; padding: 0 20px; } .con1{ padding: 0 20px; margin: 20px 0; line-height: 1px; border-left: 200px solid #ddd; //看你这个块的宽度，自己决定 border-right:200px solid #ddd; text-align: center; } .con3{ width:600px; } .con3 b{ background: #ddd; margin-top: 4px; display: inline-block; width: 180px; height: 1px; overflow: hidden; vertical-align: middle; } .con3 span{ display: inline-block; padding: 0 10px; /* 100px; //如果想换行显示，可以设置宽*/ vertical-align: middle; } </style> </head> <body> <div class="con"> <span>你是谁来的水</span> </div> <div class="con1">你是谁的老师我是你</div> <div class="con3"> <b></b> <span>你的刷爱的呼唤是</span> <b></b> </div> </body> </html>
效果图
7.充分利用label标签，提升用户体验（当点击label时，光标自动在文本域获得光标）
<label for="sample">用户名<input type="text" id="sample"></label>
8.为select下面的选项分组
<select id="selectId"> <optgroup label="groupone"> <option value="1">北京</option> <option value="2">天津</option> </optgroup> <optgroup label="groupt"> <option value="3">上海</option> <option value="4">南京</option> </optgroup> </select>
效果图：
9.同一行上文字与图片垂直居中对齐方法:为图片与文字的共同父元素所有的后代元素定义*{vertical-align:middle};