CSS width and height: auto and 100%

“This is the 8th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021”

Width: auto; height: auto

The default value for width and height is auto.

width: auto

In block-level elements, width: Auto ADAPTS to the parent element width (in fluid layout). Like water, it ADAPTS to the width of the parent element depending on the margin value.

In inline elements, width: auto is wrapped, meaning that the width of the element is determined by the width of its children.

height: auto

For both inline and block-level elements, height: auto is enveloping, meaning that the height of the element is determined by the height of its children.

In a normal fluid layout, block-level elements fill a row by default. There are two cases of occupancy.

If width is fixed and margin is auto, margin will fill the remaining space.
The margin of the block-level element is fixed and width is auto, so width fills the remaining space.

.container{
    width: 150px;
    margin: auto;
    height: 50%;
    background-color: aqua;
}
Copy the code

.container {
    width: auto;
    margin: 0 50px;
    height: 50%;
    background-color: aqua;
}
Copy the code

Width: 100% and height: 100%

Width: x% : Defines the percentage width based on the width of the containing block (parent element). Height: x% : Based on the percentage height of the block-level object containing it.

<body>
    <div class="wrap">
        <div class="container">
            <div class="content">
                Hello World!
            </div>
        </div>
    </div>
</body>
Copy the code

        .wrap {
            width: 100%;
            height: 100px;
            background-color: aquamarine;
        }

        .container {
            position: relative;
            width: 50%;
        }

        .content {
            width: 100%;
            position: absolute;
            background-color: aqua;
        }
Copy the code

Here 100% of.content is relative to.container

        .wrap {
            width: 100%;
            height: 100px;
            background-color: aquamarine;
        }

        .container {
            /* position: relative; * /
            width: 50%;
        }

        .content {
            width: 100%;
            position: absolute;
            background-color: aqua;
        }
Copy the code

Here 100% of.content is relative to.wrap

It is important to distinguish between the parent element and the containing block. In general, the containing block is the parent element, but when the element is positioned and removed from the regular document flow, the containing block is not necessarily the parent element. It needs to be determined on a case-by-case basis

Height :100% and height:auto

Height :auto: adjusts the height automatically according to the contents in the block. Height :100%, is defined as the height of the nearest parent with a defined height.

Note that the parent element height: auto causes the child element height: 100% to become invalid. If you want height:100% for the child element, the parent element needs to have an explicit height value. Or use absolute positioning. (The percentage of absolute positioning elements is calculated according to the padding box, while the percentage of non-absolute positioning elements is calculated according to the Content box)

Height :100% and height:auto

CSS width and height: auto and 100%