前端常见问题

Posted 2021-11-01 lsongyang

 

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="#" onclick="javascript:方法;return false;">文字</a>

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

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

 

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

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

8.三角

<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更大的数值的目的也就是为了保证该层能一直显示在最上！