前端常見問題

 

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更大的數值的目的也就是爲了保證該層能一直顯示在最上！