尺寸" /> 尺寸等代碼實例下載。" />
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.vxisgr.tw/" />
<title>設置鏈接<a>的尺寸</title>
<style>
a{
  width:120px;
  height:80px;
  border:1px solid red;
  color:black;
  text-decoration:none
}
</style>  
</head>
<body>
<a href="http://www.softwhy.com">51前端</a>
</body>
</html>
可以看到,css設置的鏈接a的尺寸,且代碼毫無語法錯誤,但是并沒有生效。
這是因為鏈接a元素是內聯元素,width和height屬性對內聯元素無效。
那么首先將其轉換為塊級元素或者內聯塊級元素,就可以設置它的尺寸了。
代碼修改如下:
   [ 其他 ] 運行代碼    下載代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.vxisgr.tw/" />
<title>設置鏈接<a>的尺寸</title>
<style>
a{
  width:120px;
  height:80px;
  border:1px solid red;
  color:black;
  text-decoration:none;
  display:block;
}
</style>  
</head>
<body>
<a href="http://www.vxisgr.tw">51前端</a>
</body>
</html>
通過display:block將鏈接<a>元素轉換為塊級元素。
成功設置鏈接<a>元素尺寸,將內聯元素轉換為塊級元素或者塊級內聯元素的方式有很多。
內聯元素還有一個重要的特點需要注意,就是不能夠設置上下內外邊距。
不是說設置后不生效,而是會出現一些難以預料的效果,但是能夠正常設置內聯元素的左右內外邊距。
代碼實例如下:
   [ 其他 ] 運行代碼    下載代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.vxisgr.tw/" />
<title>設置鏈接<a>的尺寸</title>
<style>
a{
  width:120px;
  height:40px;
  border:1px solid red;
  color:black;
  text-decoration:none;
  padding:10px;
}
</style>  
</head>
<body>
<a href="http://www.vxisgr.tw">51前端</a>
</body>
</html>
左右內邊距的表現非常正常,看看頂部是不是非常奇怪。
所以對于內聯元素你可以設置它的左右內外邊距,但是要設置上下內外邊距,需要將其轉換為塊級元素或者塊級內聯元素。下面再來羅列一下內聯元素的一些特點:
(1).無法設置尺寸。
(2).可以使用text-align設置內聯元素的對齊方式。
(3).內聯元素可以同時在一行排列。
(4).內聯元素不能設置上下內外邊距,可能會出現意想不到的情況。

代碼描述:設置鏈接 尺寸,設置鏈接<a>的尺寸



43 57



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: js js代碼 js實例 javascript javascript代碼 javascript實例 jshtml對象 javascripthtml對象
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表