同时设置了内联元素和块状元素,优先选择哪个

来源:12-3 我要和你站一起 - 内联元素

慕粉1464062117

2016-05-27 22:02

<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>

写回答 关注

6回答

  • Fordream4
    2016-06-04 23:46:41

    对,这应该不是同时设置,首先body部分本身是一个块状元素,若不将这个块状元素里面的内联元素设置成为块状元素,也就是没有你写的 display:block;这一步,显示出来应该是一行;但接着你把这个块状元素里面的内联元素设置成为块状元素,根据块状元素特点——每个元素独占一行,所以会显示出5行,但此时body部分本质上是一个大的块状元素,里面套着5个小的块状元素;然后你又将body部分那个大的块状元素(<div>···</div>)设置成为内联元素,此时body部分本质上变成了一个内联元素,里面包含5的小的块状元素,内联元素的显示特点是“元素的宽度就是它包含的文字或图片的宽度”,也就是它所包含的元素的宽度,即使是含有5个块状元素的内联元素,该内联函数的宽度就是5个块状元素的宽度,也就是5行。

    羊跳

    div{display:inline;}这句删了并不影响结果

    2016-07-11 16:51:00

    共 1 条回复 >

  • 慕沐3095432
    2016-05-31 14:09:43

    你这并不是同时设置吧 你这应该只是内联元素设置成了块级元素

  • magicdefu
    2016-05-29 20:36:39

    为什么是内联元素?运行结果不是显示5行嘛,不应该是块状元素吗?求教,不明白

  • taoting1234
    2016-05-28 11:45:50

    内联元素

  • 慕粉3409061
    2016-05-27 22:19:32

    内联元素

  • dyong
    2016-05-27 22:12:19

    内联元素


初识HTML(5)+CSS(3)-升级版

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

1225309 学习 · 18230 问题

查看课程

相似问题