Display:Block

CSS元素显示属性详解

最新推荐文章于 2023-02-15 09:38:12 发布

转载最新推荐文章于 2023-02-15 09:38:12 发布 · 69 阅读

·

0

·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/tig666666/p/5996830.html

本文详细介绍了CSS中块级元素与行内元素的区别，并通过示例代码展示了如何使用display属性来改变元素的默认显示方式。

根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，成为“块级”元素(block-level)；而span元素的默认display属性值为“inline”，称为“行内”元素。
块级元素：

      动占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样子；

行内元素：

      自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。

例子：

   链接 a 元素，在默认情况下是是“行内元素”，因此对a元素设置高度、宽度等属性，都是无效的。而比如div，p，li，img等默认情况下的display属性值就是“block”。所以对于链接a来说只能这样：display:block;强制将它改成块元素。看完概念看代码：
```
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <style>
 7         span,
 8         div {
 9             margin-bottom: 5px;
10             margin-left: 5px;
11             height: 50Px;
12         }
13     </style>
14 </head>
15 
16 <body>
17     <div style="background-color:#F60">Div默认为 block</div>
18     <span style="display:block;">加了block属性</span>
19     <span>没加block属性</span>
20 </body>
21 
22 </html>
```

转载于:https://www.cnblogs.com/tig666666/p/5996830.html

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。