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

一、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.尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。
   
   四、防止鼠标选中事件
   

   
   
   
   < a href=" ">登录
   
   给元素添加了
   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
   
   
   

   
   

    
    
   
        
   
        
    
   
   
   十二、盒子水平垂直居中方法2
   利用css的 position属性，把div2相对于div1的top、left都设置为50%，然后再用margin-top设置为div2的高度的负一半拉回来，用marg-left设置为宽度的负一半拉回来，css如下设置：
   
   
    
    
    
   
    
    
    
   
        
    
        
    
    
   
    
   十三、盒子水平垂直居中方法3
   还是用css的position属性，如下的html
   
   
    
    
    
   
    
    
    
   
        
    
        
    
    
   
    
   十四、盒子水平垂直居中方法4
   利用css3的新增属性
   table-cell, vertical-align:middle;
   
    
    
    
   
    
    
    
   
        
   
        
    
    
   
   
   十六、盒子水平垂直居中方法6
   利用flexbox布局
   直接在父元素上使用flexbox的布局
    
   
   
    
    
    
   
    
   
    
    
    
    
   
   
   十七、盒子水平垂直居中方法7
   利用transform的属性,注意子绝父相定位
   缺点：需要支持Html5
   
   
   
    
    
    
   
   

我是外部盒子

    我要居中

十八、盒子水平垂直居中方法8
两者都要固定定位,不常用
缺点：需要设置position属性，网页复杂时容易扰乱页面布局,而且只是元素的起始位置居中

 
 
 
 

    我要居中