前端小技巧

灰太狼 2022-05-14 15:06 210阅读 0赞

1. div里包含img底部必定多出空白的解决办法

解决方案：

1、设置div\{ font-size: 0\}

2、设置img\{ display: block\}

3、设置img\{ vertical-align:top;\}

推荐第二种方法，让img对象成为块级元素。

2．绘制圆形图片

height: 26px;

width: 26px;

border-radius: 50%;

3. background-size的cover特定值会保持图像本身的宽高比例，将图片缩放到正好完全覆盖定义背景的区域

4.换行：

word-break: break-all;

word-wrap: break-word;

5.过渡transition

transition: all .3s ease;

5.边框灰线：

border-bottom: 1px solid \#eee;

6. href=”javascript:void(0);”与href=”\#"的区别

<a href="javascript:void(0)">点击</a>点击链接后不会回到网页顶部 <a href="\#">点击</a> 点击后会回到网面顶部

"＃"其实是包含了位置信息，例如默认的锚点是＃top 也就是网页的上端

而javascript:void(0) 仅仅表示一个死链接这就是为什么有的时候页面很长浏览链接明明是＃可是跳动到了页首

而javascript:void(0) 则不是如此所以调用脚本的时候最好用void(0)

使用javascript的方法

<a href="\#" οnclick="javascript:方法;return false;">文字</a>

<a href="javascript:void(0)" οnclick="javascript:方法;return false;">文字</a>

补充 <a href="javascript:hanshu();"这样点击a标签就可以执行hanshu()函数了。

7. a标签中onclick与href之间的问题

click和href根据浏览器解析不同来确定谁先执行，又或者两者都执行。有些浏览器即使加入了href="javascript:void(0);"，也不一定会有效，所明白点，就是href本身包含了点击事件。因此click成了多余。这种需求建议舍弃a标签，用其他标签来代替，通过增加样式来达到同样的视觉效果

8.三角![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25pbmd6eGc_size_27_color_FFFFFF_t_70][]

<i></i>

.list\_bd ul li .btn .go i \{

position: absolute;

width: 0;

height: 0;

border-width: 4px;

border-color: transparent  transparent  transparent  \#c5181e;

border-style: dashed dashed dashed solid;

right: 4px;

top: 12px;

\}

9.

text-rendering: auto;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

transform: translate(0, 0);

10. Chrome浏览器下小于12号字的解决方案

font-size: 12px;

\-webkit-transform: scale(0.8);

transform: scale(0.8);

11.    z-index: 999;

如果2个或2个以上通过绝对或者相对定位的层有重叠的时候，这个时候'z-index' 的值谁的大就那个层显示在最上面！直接设置个999或者是比999更大的数值的目的也就是为了保证该层能一直显示在最上！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25pbmd6eGc_size_27_color_FFFFFF_t_70]: /images/20220504/31329fea8da04af6ad976276baa5ce42.png

发表评论取消回复

表情：

评论列表（有 0 条评论，210人围观）

还没有评论，来说两句吧...

相关阅读

相关 web前端9个开发常见小技巧

一、浏览器地址栏运行JavaScript代码这个很多人应该还是知道的，在浏览器地址栏可以直接运行JavaScript代码，做法是以javascript:开头后跟要执行的语句

傷城~/ 2022年12月07日 15:15/ 0 赞/ 162 阅读

相关技术分享：前端开发小技巧

一般人不知道的黑科技今天, 我们来说几个前端比较冷门, 不是很常用的小玩意 ![format_png][] 标签语句 > JavaScript 语言是

雨点打透心脏的1/2处/ 2022年12月01日 01:17/ 0 赞/ 223 阅读

相关你应该需要知道的前端小技巧

本文主要收集一些前端开发中我们可能不常用的开发技巧。如果路过的小伙伴有什么实用的小技巧可以再下方留言，我会将你宝贵的小技巧加在本文的后面，供路过的小伙伴们学习。 1、清除定

心已赠人/ 2022年11月30日 15:57/ 0 赞/ 219 阅读

相关 web前端35个jQuery小技巧！

废话不说直接代码，有问题可以一起交流 1. 禁止右键点击 $(document).ready(function(){ $(document)

约定不等于承诺〃/ 2022年08月22日 03:59/ 0 赞/ 132 阅读

相关 [译文&摘抄] 前端 Console 调试小技巧

原文地址：How to debug Front-end: Console 原文作者：Michał Witkowski 译文出自：掘金翻译计划转自：[https:/

柔情只为你懂/ 2022年06月02日 03:43/ 0 赞/ 150 阅读

相关谷歌Chrome前端小技巧集锦

[你可能不知道console强大][console] 阅读目录写在前面谷歌控制台Elements面板查看元素上绑定的事情样式操作

曾经终败给现在/ 2022年05月21日 09:20/ 0 赞/ 240 阅读

相关前端小技巧集锦【持续更新中……】

记录一下前端开发过程中遇到的一些小问题以及解决方法。目录目录最近更新 2019/10/23：在控制台使用document.designMode帮助进行调试

向右看齐/ 2022年05月17日 10:22/ 0 赞/ 305 阅读

相关前端小技巧

1. div里包含img底部必定多出空白的解决办法解决方案： 1、设置div\{ font-size: 0\} 2、设置img\{ display: block\}

灰太狼/ 2022年05月14日 15:06/ 0 赞/ 211 阅读

相关前端小技巧

ps快捷键: ctrl+r标尺 ctrl+:隐藏辅助基线 ctrl+d取消选区 F7图层 css 书写顺序正确的书写顺序可以减少浏览器的reflow回流,提升浏览器

梦里梦外;/ 2022年04月10日 02:40/ 0 赞/ 259 阅读

相关前端require代码抽离小技巧

`DEMO` > 文件目录结构 > ![1501373-20190722104737620-942140030.png][] `plugin.js` // /

向右看齐/ 2021年11月22日 05:52/ 0 赞/ 305 阅读