<style type="text/css">
a,span,em{
background:pink;/*设置a、span、em标签背景颜色都为粉色*/
display:block;
}
div{display:inline;}
</style>
</head>
<body>
<div>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.imooc.com">慕课网</a>
<span>33333</span>
<span>44444</span><em>555555</em>
</div>
2016-05-27
对，这应该不是同时设置，首先body部分本身是一个块状元素，若不将这个块状元素里面的内联元素设置成为块状元素，也就是没有你写的 display:block;这一步，显示出来应该是一行；但接着你把这个块状元素里面的内联元素设置成为块状元素，根据块状元素特点——每个元素独占一行，所以会显示出5行，但此时body部分本质上是一个大的块状元素，里面套着5个小的块状元素；然后你又将body部分那个大的块状元素（<div>···</div>）设置成为内联元素，此时body部分本质上变成了一个内联元素，里面包含5的小的块状元素，内联元素的显示特点是“元素的宽度就是它包含的文字或图片的宽度”，也就是它所包含的元素的宽度，即使是含有5个块状元素的内联元素，该内联函数的宽度就是5个块状元素的宽度，也就是5行。
举报
