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

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>

posted @ 2012-05-12 20:18  roytanlu  阅读(192)  评论(0)  编辑  收藏  举报