些時候我們在開發一些項目的時候，有這么一個需求，就是當打開一個html頁面就自動觸發點擊事件

廢話不多說直接看代碼:

就是這么簡單。

言

由于前端所設計的領域太多，每篇文章所能講述的知識點太多，對于讀者來說不太好消化，因此以后基本是采用一篇文章一個知識點來寫作。

今天這篇文章主要講解css中a標簽的高度和寬度問題。

css

問題描述

在采用div+css的方式布局頁面時，對于超鏈接a標簽，無法設置其高度和寬度，即使對其設置了width和height屬性，也不會生效。

我們通過如下例子來看看。

給a標簽設置了如下css屬性。

css屬性

但是從下圖可以看出，a標簽的高度和寬度沒有發生變化，仍然是122px*22px。

實際效果

問題原因

為什么會出現這個情況呢？

因為a標簽屬于行內元素，行內元素是無法直接設置高度和寬度的。

遇到這個問題，我們該怎么解決呢，主要有以下幾個方法。

解決方法1-設置塊級元素

既然行內元素無法設置高度和寬度，那么我們將其設置為塊級元素呢？

我們對a標簽設置以下的樣式。

設置display:block

我們可以看出a標簽的高度和寬度發生了變化，而且在設置為塊級元素后，占據了一整行的位置。

高度發生變化

解決方法2-設置浮動

通過將a標簽設置為浮動狀態，同樣可以改變其高度和寬度。

我們給a標簽設置以下css樣式。

設置為浮動元素

我們可以看出a標簽的高度和寬度發生了變化，并且其占據的寬度和設置的width屬性一樣，與方法1呈現的不一樣。

改為浮動元素

方法3-設置padding屬性

在設置padding屬性的時候，不能直接改變a標簽的高度和寬度，實際是一種模擬的狀態。

而且需要注意的是在設置padding-top和padding-bottom時是不生效的，即使從控制臺看元素顯示占據了空間，但不會影響頁面的布局。因此在設置padding屬性時，實際只會影響到a標簽的寬度。

我們給a標簽設置以下padding屬性。

設置padding屬性

我們可以看出a標簽占據的高度和寬度發生了變化，但是實際只是寬度占據的空間發生變化，高度不變。

設置padding屬性

結束語

今天這個簡單的知識點：設置a標簽的高度和寬度，大家都學會了嗎？

IE瀏覽器下，a標簽會出現的虛線邊框問題：

上圖中，紅線包裹的就是一個翻頁的按鈕，按鈕實際是html的a標簽做的，鼠標點擊翻頁按鈕會加了一個虛線的邊框

去掉虛線邊框方法：

可以這樣寫，但是這樣寫還不是很完美，在頁面中調用JS 動作比較頻繁的話，頁面會變得卡頓；

解決方法可以寫成下面這樣：

寫在A里，不管是鼠標放上，鼠標點擊，還是默認，都會執行 star:expression(this.onFocus=this.blur());， 這個代碼相對于IE來說就是一個CSS的動作調用，和JS原理一樣，頁面資源耗不起，也算是IE的BUG吧~~~我們實現的效果是要點擊的時候沒有虛 線，所以就寫在a:active里就可以了，意思就是點擊時才執行，才去掉虛線框。這樣鼠標在放上A和默認的情況下就不會卡。

要同時兼容IE和火狐瀏覽器，樣式直接寫成以下就可以：