display和position

display common properties

Common attribute values ​​of display are block, inline, inline-block, none and HTML5 added flex.

display: block , this element is displayed as a block-level element, do not occupy a row and other elements can be juxtaposed, you can directly set the width and height, without setting width and height, the default width is 100% of the parent element, margin and padding are set in four directions of up, down, left and right Are valid

Common block-level elements are h1 ~ h6, div, p, ul, ol, dl, table, and HTML5 new tags header, footer, section, nav

display: inline , this element is displayed as an inline element, arranged side by side with other elements, when the width and height cannot be set directly, the width and height are supported by the content, the margin setting is only valid in the left and right direction, and the upper and lower are invalid, and the padding setting is valid in the upper right, lower left

Common inline elements are a, span, img, label, input, textarea, select

display: inline-block , this element is displayed as an inline block element, arranged side by side with other elements, you can directly set the width and height, margin and padding are valid for the four directions of up, down, left, and right

display: none , hide this element, can be used to control the explicit and implicit switching of the element.

Several methods of hiding elements

1、display:none

The element is not visible and the hidden element no longer occupies any space, does not respond to user interaction, as if the element is completely absent, which will cause the page layout to change.

2、opacity:0

It only hides the element visually, and the element itself still occupies its own position, and can respond to user interaction. There is a layer of visual effect between hiding and not hiding.

3、visibility:hidden

Like opacity, it is visually hidden but still occupies the original position, but it cannot respond to user interaction. It is suitable for the case where the page layout is not changed after the element is hidden.

4、postion:absolute;left:-9999px;或者margin-left: -9999px;

Remove the element from the screen to achieve the hidden effect, but it is not necessary to be too rough.

postion

Common property values ​​of position are relative, absolute, and fixed, and the default value is static.

positon: relative is relative positioning, relative to the original position of the element, without leaving the document flow.

position: absolute is absolute positioning, relative to the first parent element whose position is not static, if all parent elements are static, it will be positioned relative to the document, and will leave the document flow.

position: fixed is fixed positioning, positioning relative to the browser, will leave the document flow, generally used to fix the top and bottom navigation bar and the side function bar.

Document flow refers to the arrangement of elements from top to bottom and left to right during page layout. There are three situations that will make the element out of the document flow: float: left / right, position: absolute and position: fixed,

The float and position are slightly different from the document flow.

Like two brother divs, when the left div is floated away from the document stream and position is separated from the document stream, the results obtained are different.

When using float, the left div will be wrapped by the text of the right div

<style>
        *{
            margin:0;
        }
        .a{
            float: left;
            background:#c7a337;
        }
        .b{
            background:#6C6E85;
        }
</style>
<div class="a">
    11
</div>
<div class="b">
    <p>222</p>
    <p>22222</p>
</div>

When using position, the left div will overlap the right div

<style>
        *{
            margin:0;
        }
        .a{
            position: absolute;
            left:0;
            background:#c7a337;
        }
        .b{
            background:#6C6E85;
        }
</style>
<div class="a">
    11
</div>
<div class="b">
    <p>222</p>
    <p>22222</p>
</div>

This is because although float is separated from the document flow but not from the text flow, the position is completely separated from the document flow and the text flow.

The document flow is relative to the box model, while the text flow is relative to the text paragraph.