我有以下代码来放置图像作为 anchor ,这是骨架代码:
<html>
<div id="outer">
<div id="facebookButton">
<a href="url"></a>
</div>
</div>
</html>
在 CSS 中:
#facebookButton a{
width:20px;
height:20px;
display:block;
/*place code to load image*/
}
此处将display
属性设置为block 的目的是什么?有什么好处?
最佳答案
display
属性控制元素在页面上的显示方式。它有几个值,但最常用的是:
- 内联 将元素显示为内联(如
<span>
)。 - block 将元素显示为 block 元素(如
<div>
)。 - none 隐藏元素。
在你的例子中,<a>
是一个内联元素,所以它显示在它周围的文本中:
<p>This is <a href="" style="border: 1px solid blue;">a link</a> within text.</p>
但是通过改变它的display
属性(property)block
, 它将显示为 div
(一个与其周围的文本分开的 block )并且您可以控制其高度和宽度:
<p>This is <a href="" style="display: block; border: 1px solid blue; width: 100px; height: 50px;">a link</a> within text.</p>
关于html - 为什么 CSS 设计器使用显示 :block?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32960424/