因为a是行内元素,要把他变成块状元素才行!
我们在日常敲代码中经常会遇到给链接a加边框加不上的情况!
按道理说是没有问题的,但为什么会加不上呢!
我也是在网上研究了好久才明白的。
在实际网页开发中,我们不是直接给一个图片的,而是给这个图片一个链接,用户一点击图片就可以链接到商品的目标地址。
但是图片是一个块状盒子,如果直接给链接a设置边框,是行不通的。
- <style>
- .box {
- margin: 0 auto;
- width: 200px;
- height: 100px;
- background-color: pink;
- }
- a {
- display: block;
- border: 10px solid #ccc;
- }
- .w {
- width: 300px;
- height: 200px;
- margin: 0 auto;
- }
- img {
- width: 100%;
- }
- </style>
- </head>
- <body>
- <div class="w">
- <a href="#"><img src="2.jpg" alt=""></div></a>
- </div>
只有给a加上 display:block 之后才能正常显示边框!