块级元素和行级元素相互转换

行级元素与块级元素的转换

如果想将块级元素与行级元素相互转换，该怎么办呢？

　　 可以在css样式中用display:inline将块级元素设为行级元素

 　　同样，也可以用display:block将行级元素设为块级元素

代码示例如下：

<html>
<head>
<title></title>
<style type="text/css">
.div1{
background-color: red;
display: inline;;
}

.span1{

background-color: yellow;
display: block;
}

</style>

</head>
<body>
<div class="div1">我是块级元素1</div>
<div class="div1">我是块级元素2</div>
<span class="span1">我是行级元素1</span>
<span class="span1">我是行级元素2</span>


</body>
</html>

posted @ 2016-10-10 15:40  魔兽小白  阅读(1373)  评论(0)    收藏  举报