前端开发之常用小技巧分享

最新推荐文章于 2024-10-02 22:27:53 发布

at小白在线中

最新推荐文章于 2024-10-02 22:27:53 发布

阅读量735

点赞数

分类专栏：前端培训文章标签：前端 css chrome

原文链接：www.atguigu.com

版权

前端培训专栏收录该内容

120 篇文章 3 订阅

订阅专栏

一、chrome 调试快捷键

1.ctrl+shift+f 全文查找

2.ctrl+o 查找文件名

3. ctrl+shift+o 查找 js 函数名

二、常用的全屏居中 CSS 函数

body {
height: 100vh;
text-align: center;
line-height: 100vh;
}

三、使用font-size/font-family注意事项

1.现在网页中普遍使用14px+。

2.尽量使用偶数的数字字号，ie6等老式浏览器支持奇数会有bug。

2.各种字体之间必须使用英文状态下的逗号隔开。

3.中文字体需要加英文状前端培训态下的引号，英文字体一般不需要加引号，当需要设置英文字体时，英文字体名必须位于中文字体名之前。

4.如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如

font-family: “Times New Roman”;

5.尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

四、防止鼠标选中事件

<div class="mask" onselectstart="return false"></div>
<div class="link">
< a href=" ">登录</ a>
</div>

给元素添加了

onslectstart="return false"

就可以防止鼠标选中事件。

五、少用id

如果不在页面中用js引用元素，尽可能不要设置元素的id，也尽量不要用#main{}来设置元素css样式，而是用class方式.main{},因为可以防止ID重复，造成错误可以方便引入新CSS复写样式，另外应当绝对避免行内css样式。

六、二维码生成当前网址的插件

装个二维码生成当前网址的插件，以方便查看手机实际显示效果，现在移动端日益重要，作为前端，一定不能忽视移动端的显示效果，虽然浏览器都支持选择device来测试不同的设备显示效果，但毕竟和真实设备有差别，尤其在测试微信内的页面时候，非常方便。

七、chrome中隐藏元素

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

八、开启弹性滚动

css 代码如下：

body {
overflow: scroll;
-webkit-overflow-scrolling: touch;
}

注意：Android 不支持原生的弹性滚动，但可以借助第三方库 iScroll 来实现

九、CSS协助神器：CSS Reference

假如平时对一些CSS属性不是很熟悉，当你想用这些熟悉的时候，你可以用 CSS Reference 这个工具，实现其可视化 CSS的效果。

第一步：打开网站 http://cssreference.io/，在搜索框输入你想使用的语法关键词，比如“align-items”。

第二步：在结果页查看用法，左边是语法描述告诉你该怎么写，右边是实际布局效果图告诉你写了之后长成啥样。

十.获取当前月份的最后一天

其实就一行代码，挺简单的。

function getFirstDay(year, month) {
  return new Date(year, month, 0).getDate()
}

十一、盒子水平垂直居中方法1

利用margin，div1的宽减去div2的宽就是div2margin-left的数值：（100-40）/2=30，div1的高减去div2的高就是div2margin-top的数值：（100-40）/2=30

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
    </head>
    <body>
        <style type="text/css">
            .div1{  width: 100px; height: 100px; border: 1px solid #000000;} 
            .div2{ width:40px ; height: 40px; background-color: green;}
            .div22{
                margin-left: 30px;margin-top: 30px;
            }
</style>
        <div class="div1">
            <div class="div2 div22">
            </div>
        </div>
    </body>
</html>

十二、盒子水平垂直居中方法2

利用css的 position属性，把div2相对于div1的top、left都设置为50%，然后再用margin-top设置为div2的高度的负一半拉回来，用marg-left设置为宽度的负一半拉回来，css如下设置：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
    </head>
    <body>
        <style type="text/css">
            .div1{  width: 100px; height: 100px; border: 1px solid #000000;} 
            .div2{ width:40px ; height: 40px; background-color: green;}
 
            .div11{
                position: relative;
            }
            .div22{
                position: absolute;top:50%;left: 50%;margin-top: -20px;margin-left: -20px;
            }
</style> 
        <div class="div1 div11">
            <div class="div2 div22"> 
            </div>
        </div> 
    </body>
    </html>

十三、盒子水平垂直居中方法3

还是用css的position属性，如下的html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
    </head>
    <body>
        <style type="text/css">
            .div1{  width: 100px; height: 100px; border: 1px solid #000000;} 
            .div2{ width:40px ; height: 40px; background-color: green;} 
            .div11{
                position: relative;
            }
            .div22{
                position: absolute;margin:auto; top: 0;left: 0;right: 0;bottom: 0;
            }
</style> 
        <div class="div1 div11">
            <div class="div2 div22"> 
            </div>
        </div> 
    </body>
    </html>

十四、盒子水平垂直居中方法4

利用css3的新增属性

table-cell, vertical-align:middle;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
    </head>
    <body>
        <style type="text/css">
            .div1{  width: 100px; height: 100px; border: 1px solid #000000;} 
            .div2{ width:40px ; height: 40px; background-color: green;}
 
            .div11{
                display: table-cell;vertical-align: middle;
            }
            .div22{
                margin: auto;
            }
</style> 
        <div class="div1 div11">
            <div class="div2 div22">
            </div>
        </div> 
    </body>
</html>

十六、盒子水平垂直居中方法6

利用flexbox布局

直接在父元素上使用flexbox的布局

 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style type="text/css">
        .div1 {
            width: 100px;
            height: 100px;
            border: 1px solid #000000;
        } 
        .div2 {
            height: 40px;
            width: 40px;
            background-color: green;
        } 
        .div11 {
            display: flex;
            /*!*flex-direction: column;*!可写可不写*/
            justify-content: center;
            align-items: center;
        }
</style>
</head>
<body> 
<div class="div1 div11">
    <div class="div2 div22"> 
    </div>
</div> 
</body>
</html>

十七、盒子水平垂直居中方法7

利用transform的属性,注意子绝父相定位

缺点：需要支持Html5

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style type="text/css">
        body {
            margin: 100px auto;
            position: relative;
        }
 
        .div1 {
            width: 100px;
            height: 100px;
            border: 1px solid #000000;
            background-color: red;
        }
 
        .div2 {
            height: 40px;
            width: 40px;
            background-color: green;
        }
 
        .center {
            position: absolute;
            top: 50%;
            left: 50%;
            -ms-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }
</style>
</head>
<body>
 
 
<div class="div1 center">
    我是外部盒子
    <div class="div2 center">
        我要居中
    </div>
</div>
</body>
</html>

十八、盒子水平垂直居中方法8

两者都要固定定位,不常用

缺点：需要设置position属性，网页复杂时容易扰乱页面布局,而且只是元素的起始位置居中

<html>
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style type="text/css">
 
 
        .div1 {
            width: 100px;
            height: 100px;
            border: 1px solid #000000;
            background-color: red;
            position: relative;
        }
 
        .div2 {
            height: 40px;
            width: 40px;
            background-color: green;
            margin:30px 30px;
 
        }
 
        .center{
            position: fixed;
            left: 50%;
        }
</style>
</head>
<body>
 
 
<div class="div1 center">
   
    <div class="div2 center">
        我要居中
    </div>
</div>
</body>
</html>