整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
言
由于前端所設計的領域太多，每篇文章所能講述的知識點太多，對于讀者來說不太好消化，因此以后基本是采用一篇文章一個知識點來寫作。
今天這篇文章主要講解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標簽的高度和寬度，大家都學會了嗎？
言
由于前端所設計的領域太多，每篇文章所能講述的知識點太多，對于讀者來說不太好消化，因此以后基本是采用一篇文章一個知識點來寫作。
今天這篇文章主要講解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標簽的高度和寬度，大家都學會了嗎？
在css中，當按百分比設定的一個元素的寬度時，它確實是相對于寬度計算的，但是，對于一些豎向的距離屬性呢？比如padding-top或者bottom和margin-top或者bottom等，當按百分比設定時，它們依據的是父容器的寬度，而不是高度。
下面是一個實例演示，你可以調整容器的寬度，但你會發現，黃塊的padding-bottom的距離也會隨之寬度而變大或變小。
以下為大家展示下
HTML：
CSS:
效果：
總結：
當移動滑動條時，我們css只修改了容器的寬度。但是，這三個屬性的高度也隨之變化。所以，可以看出，當按把百分比計算的是按容器的寬度，而不是高度來的。
切圖 qiewtu(.com)
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
