前端常见问题

 

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

解决方案：

一、设置div{ font-size: 0}

二、设置img{ display: block}

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