早安.晚安

详解<a>标签

相信对于学前端的人而言<a>标签并不陌生,我们先把他所有的属性列出来 

一.主要属性

  一般来说,a标签有着四种状态,分别是link,hover,active,visited,接下来我会仔细讲述这些状态

  1. link  这是未访问的链接的状态,一般来说就是我们打开网页不进行任何操作时a标签的状态。

  2. hover 这是鼠标划过链接出现的状态,比如字体变大变小 ,颜色变化之类。个人认为与js中onmouseover事件类似。

  3. active 这是点击鼠标之后会出现的状态,但是是点击鼠标左键才会出现效果。个人认为与js中onclick事件类似。

  4. visited 这是点击被鼠标访问过后出现的样式状态。

二.元素性质

  <a>为行内元素,只可嵌套非a的inline类元素,比如我们最常用的<a href="#"><img src=" " alt=" "></a>  -->图片链接。不可嵌套<div></div>.

  因为a为行内元素,不能对他设置宽和高。

  <head>
  <title></title>
  <style type="text/css">
  a{
  width: 100px;
  height: 100px;
  }
  </style>
  </head>
  <body>
  <a href="#">abc</a>
  </body>

由代码可看出我们对a设置了宽100px,高100px,但是我们看他的结构图

他是默认值的,所以设置宽高无效。

如果一定要对他设置一个宽 高,那么给他加一个属性 display:block,把他显示为块级元素即可。

a{
width: 100px;
height: 100px;
display: block;
}

 

posted on 2015-12-13 19:23  早安.晚安  阅读(629)  评论(0编辑  收藏  举报