发表新帖
发表新帖

display:block inside display:inline

前端 未结
关注
4 524
礼貌的吻别
礼貌的吻别 2020-11-27 04:53

I want to understand what happens when an element whose CSS is display:block is a DOM child of an element whose CSS is display:inline (so that the

相关标签:
4条回答
  • 迷失自我
    2020-11-27 05:25

    It sometimes depends on the exact css defined or browser.

    Most commonly, I've seen two behaviors:

    • The display:block element inside display:inline element makes the display:inline act like a display:block with width:100%.

    • A display:inline element containing only display:block float:left or float:right elements takes no space, and is as if there were no elements inside of it. The display:block elements act as if they where inside another display:block element, sometimes having funky actions depending on position.

    Both position and float make the child elements have sometimes bizarre behaviors, but avoiding them make them work generally as if they were inline.

    0 讨论(0)
  • 天命终不由人
    2020-11-27 05:27

    I think I've understood the difference, finally, and there is a fundamental difference.

    When the top-level element (e.g. <BODY>) is defined with display:block, then:

    • There's a block associated with the element

    • This block contains (i.e. it acts as the containing block for) anonymous blocks (e.g. text nodes) and for non-anonymous child element (e.g. <P> blocks)

    • The top-level element's style attributes, e.g. padding, are associated with this containing block

    When the top-level element (e.g. <BODY>) is defined with display:inline, then:

    • There's no single block associated with the element

    • The element's contents (text nodes in an anonymous block, and child elements in a non-anonymous block) do not have a containing block which is associated with the top-level element

    • The top-level element's style attributes, e.g. padding, are associated with its inline content

    0 讨论(0)
  • 闹比i
    2020-11-27 05:36

    when i read the spec, i find your question actually quite well answered:

    When an inline box contains a block box, the inline box [...] [is] broken around the block. The [in]line boxes before the break and after the break are enclosed in anonymous boxes, and the block box becomes a sibling of those anonymous boxes.

    <BODY style="display: inline; ">
This is anonymous text before the P.
<P>This is the content of P.</P>
This is anonymous text after the P.
</BODY>

    The resulting boxes would be an anonymous block box around the BODY, containing an anonymous block box around C1, the P block box, and another anonymous block box around C2.

    or, visually:

    +- anonymous block box around body ---+
| +- anonymous block box around C1 -+ |
| |                                 + |
| +---------------------------------+ |
|                                     |
| +- P block box -------------------+ |
| |                                 + |
| +---------------------------------+ |
|                                     |
| +- anonymous block box around C2 -+ |
| |                                 + |
| +---------------------------------+ |
+-------------------------------------+

    now to your question: is this different from <BODY style="display: block; ">?

    yes, it is. while it is still 4 boxes (anonymous block box around body now being BODY block box), the spec tells the difference:

    Properties set on elements that cause anonymous block boxes to be generated still apply to the [generated anonymous block] boxes and content of that element. For example, if a border had been set on the BODY element in the above example, the border would be drawn around C1 (open at the end of the line) and C2 (open at the start of the line):

    +--------------------------------------
| This is anonymous text before the P. 
+--------------------------------------
  This is the content of P.
 --------------------------------------+
  This is anonymous text after the P.  |
 --------------------------------------+

    this is different to <BODY style="display: block; ">:

    +--------------------------------------+
| This is anonymous text before the P. |
|                                      |
| This is the content of P.            |
|                                      |
| This is anonymous text after the P.  |
+--------------------------------------+
    0 讨论(0)
  • 时光取名叫无心
    2020-11-27 05:39

    An inline container cannot contain a block container. The usual result when such a thing occurs is that the inline container is converted to block in order to accommodate its contents. If you need a container that appears inline to contain something that appears to be a block use the following:

    display: inline-block;

    inline-block property is a display mode that positions the container in an inline fashion with the immediately properties and definitions of an inline container applied to only the container itself without limiting its children to such constraints. The result is that a block container child of a inline-block parent is confined to the dimensions of the parent if the parent has defined definitions or may cause the parents dimensions to stretch to accommodate a larger child. A container set to inline-block can receive properties only afforded to blocks, such as width or height, without loosing the default positioning associated with an inline container.

    That property is not supported by FF2, and as a result is not supported by Ice Weasel browser. Nearly every other browser supports that property including IE6, so you should be fine to use it since almost nobody is using FF2 or Ice Weasel except for a minor of users confined to out of the box Linux distributions.

    0 讨论(0)
 看不清?
提交回复
热议问题