关于block
请问下，inline,inline-block,block三者之间时什么关系或者说区别的？
皮大大
2018-11-19
2 回答
这三个值是在display属性下的。而display 属性规定元素应该生成的框的类型。
举个栗子：
<html>
<head>
<style type="text/css">
p.tx{display: inline}
div {display: none}
span.tx{display:block}
</style>
</head>
<body>
<p class="tx">本例中的样式表把段落元素设置为内联元素。也就是说作为块级元素的p标签没有自动换行了</p>
<p class="tx">而 div 元素不会显示出来！</p>
<div>div 元素的内容不会显示出来！</div>
<p>这一行<span>span标签里的文字没有换行</span>发生了什么。</p>
<p>这一行<span class="tx">span标签里的文字换行了，是因为将该标签的display属性设置为了block，即将内联元素的span转换了块级元素</span>换行了。</p>
</body>
</html>所以总结下，block值，是将此元素将显示为块级元素，此元素前后会带有换行符；
而inline值，是display属性得默认值，被设置的元素会被显示为内联元素，元素前后没有换行符；
最后inline-block值，则是行内块元素。即将该元素设置为行内，前后没有换行符，但是它的优先度是块级元素的优先度。
举报
0/150
提交
取消
