块级元素与行内元素的区别及其CSS展现

最新推荐文章于 2024-11-12 18:05:44 发布

weixin_30729609

最新推荐文章于 2024-11-12 18:05:44 发布

阅读量49

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/roytanlu/archive/2012/05/12/2497451.html

本文通过具体的CSS样式设置示例，详细介绍了HTML中块级元素与行内元素的区别及应用方式。通过对比div（块级元素）与a（行内元素）的布局效果，帮助读者更好地理解两者的特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、块级元素是换行的，类似猛击回车的效果；
2、行内元素是在同一行的，类似空格的效果；
以上是我乱总结的，大家还是看图吧：

 1 <style type="text/css">
 2 div{        /*标记选择器，定义body的CSS为：宽度2px、样式solid、蓝色*/
 3     border:2px solid blue;
 4     padding:10px;        /*盒子的填充为10px*/
 5     margin:2px;        /*盒子的边距为2PX*/
 6     }
 7 a{        /*标记选择器，定义a标记的CSS为：宽度2px、样式double、红色*/
 8     border:2px dashed red;
 9     padding:10px;        /*盒子的填充为10px*/
10     margin:10px;        /*盒子的边距为10PX*/
11     }
12 </style>
13 
14 <body>
15     <div>body内第1个div，我是块级元素</div> <!--body内第1个div，适用div的CSS定义-->
16     
17     <a href="#">链接1，我是行内元素</a>        
18     <a href="#">链接2</a>        
19     <a href="#">链接3</a>
20     <a href="#">链接4</a>            <!--a链接，使用a标记选择器-->
21     <div>
22     body内第2个div<p>div内的段落p，我是块级元素</p>
23     </div>
24 </body>