一、chrome 调试快捷键 1.ctrl+shift+f 全文查找 2.ctrl+o 查找文件名 3. ctrl+shift+o 查找 js 函数名 二、常用的全屏居中 CSS 函数 { : ; : ; : ; } 三、使用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> 给元素添加了 onslectstart="return false" 就可以防止鼠标选中事件。 五、少用id 如果不在页面中用js引用元素,尽可能不要设置元素的id,也尽量不要用#main{}来设置元素css样式,而是用class方式.main{},因为可以防止ID重复,造成错误可以方便引入新CSS复写样式,另外应当绝对避免行内css样式。 六、二维码生成当前网址的插件 装个二维码生成当前网址的插件,以方便查看手机实际显示效果,现在移动端日益重要,作为前端,一定不能忽视移动端的显示效果,虽然浏览器都支持选择device来测试不同的设备显示效果,但毕竟和真实设备有差别,尤其在测试微信内的页面时候,非常方便。 七、chrome中隐藏元素 在 Chrome 浏览器的 Elements 里面选中某个元素,按 h 可以隐藏该元素。 八、开启弹性滚动 css 代码如下: { : ; : ; } 注意:Android 不支持原生的弹性滚动,但可以借助第三方库 iScroll 来实现 九、CSS协助神器:CSS Reference 假如平时对一些CSS属性不是很熟悉,当你想用这些熟悉的时候,你可以用 CSS Reference 这个工具,实现其可视化 CSS的效果。 第一步:打开网站 http:///,在搜索框输入你想使用的语法关键词,比如“align-items”。 第二步:在结果页查看用法,左边是语法描述告诉你该怎么写,右边是实际布局效果图告诉你写了之后长成啥样。 十.获取当前月份的最后一天 其实就一行代码,挺简单的。 (, ) { (, , ).() } 十一、盒子水平垂直居中方法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属性,网页复杂时容易扰乱页面布局,而且只是元素的起始位置居中 . { : ; : ; : ; : ; : ; } . { : ; : ; : ; : ; } .{ : ; : ; } |
|