display属性的应用

最新推荐文章于 2021-09-06 19:12:06 发布

suncheng_hong

最新推荐文章于 2021-09-06 19:12:06 发布

阅读量946

点赞数

CC 4.0 BY-SA版权

分类专栏： div+css 文章标签： css div

本文链接：https://blog.youkuaiyun.com/suncheng_hong/article/details/3150475

div+css 专栏收录该内容

5 篇文章

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
                "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=gbk">
  <style>
  a{
    width:200px;
    line-height:40px;
    border:1px solid red;
    background-color:#CCC;
    text-decoration:none;
    text-align:center;
  }
  </style>
  </head>
<body>
  <a href="#">链接文字</a>
</body>
</html>

为什么设置a元素的宽高，不起作用呢？
原来每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display 属性值为“block”，成为“块级”元素(block-level)；而span元素的默认display属性值为“inline”，称为“行内”元素。其中a元素默认“inline”,自然设置宽高是不起作用的。因为行内元素，则没有自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。
因此在css样式中加入

display:block;

就ok了。