前端的一些小技巧

1.在 Chrome 浏览器的 Elements 里面选中某个元素，按 h 可以隐藏该元素。

2.谷歌的给打印内容设置样式

console.log('%c你%c是%c谁','font-size:20px;color:pink;','color:green','color:blue');

 在 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};