问答详情
源自:12-2 我要独占一行 - 块级元素

关于block

请问下,inline,inline-block,block三者之间时什么关系或者说区别的?


提问者:皮大大 2018-11-19 15:22

个回答

  • 牧师不是我
    2019-02-19 15:37:43

    asdqwe

  • 一笑奈何8
    2018-11-19 16:56:29

    这三个值是在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值,则是行内块元素。即将该元素设置为行内,前后没有换行符,但是它的优先度是块级元素的优先度。