前端实用的小技巧【基础篇】

编程技巧是前辈们经验的总结和提炼，有助于我们减少尝试与错误的任意性，节约解决问题所需的时间，提高解决问题成功的概率。

Html篇

1、网站自动刷新

 <meta http-equiv="refresh" content="5"><!--最好在head标签加，content等于几，几秒刷新一次  -->

2、快速隐藏

  一个原生的HTML属性隐藏，其效果类似于添加一个style=“display: none;”。

<p hidden>该段落在页面上是不可见的，它对HTML是隐藏的。</p> <!--对伪元素无效  -->

3、使用capture属性打开设备摄像头

  capture属性，属性值有两个：

• user用于前置摄像头
• environment用于后置摄像头

  <input type="file" capture="user" accept="拍照保存路径"/>

4、在input标签中输入多个项目

<input type="file" multiple>

5、指定要上传的文件类型

<input type="file" accept=".jpeg,.png">

6、颜色选择器

  颜色值由十六进制来表示红、绿、蓝（RGB）。
每个颜色的最低值为 0(十六进制为 00)，最高值为 255(十六进制为FF)。
十六进制值的写法为 # 号后跟三个或六个十六进制字符。

<input type="color"/>

7、 激活拼写检查

  HTML的spellcheck属性并将其设置为true以激活拼写检查。使用lang属性指定待检查的语言。

<input type="text" spellcheck="true" lang="en">

8、点击链接自动下载

<a href="image.png" download><!--条件是单击目标资源的链接 -->

9、为视频创建缩略图

<video poster="picture.png"></video>

10、阻止浏览器翻译

<p translate="no">logo</p>

CSS篇

内容居中

1、文字/内容居中

text-align: center

2、文字垂直居中

line-height: height/* line-height高度等于盒子高度 */

盒子居中

1、盒子水平居中

margin: 0 auto;/*条件盒子是块级元素*/

2、flex方法居中

<div class="parent"><div class="child"></div></div>

/* 父盒子 */
.parent {
    width: 600px;
    height: 600px;
    background-color: red;
    display: flex; /* 弹性盒子 */
    justify-content: center; /*水平居中*/
    align-items: center; /*垂直居中*/
}
/* 子盒子 */
.child {
    width: 200px;
    height: 200px;
    background-color: blue;
}

3、定位居中(子绝父相)

/* 父盒子 */
  .parent {
            width: 600px;
            height: 600px;
            background-color: red;
            position: relative;
        }
/* 子盒子 */
        .child {
            width: 200px;
            height: 200px;
            background-color: blue;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }

4、table-cell方法居中

/* 父盒子 */
.parent {
    width: 600px;
    height: 600px;
    background-color: red;
    display: table-cell; /*以列来排布*/
    vertical-align: middle
}
/* 子盒子 */
.child {
    width: 200px;
    height: 200px;
    background-color: blue;
    margin: 0 auto;
}

tips：当图片进行机械对齐时有空隙，可以通过vertical-align: middle来居中对齐避免空隙问题。

点赞过十个，搜集内容写加深篇和进阶篇