Introduction to the layout of HTML elements inline elements and block-level elements

HTML element layout display

Default display (width and height attributes are not added)

①The way HTML elements are displayed in the browser is: from top to bottom, from left to right.

②Inline elements are filled according to the width of the browser and its own width. If there is not enough blank space left in the current line, it will switch to the next line.

③Block-level elements display the approximate area according to the display method of inline elements; when the width of the browser decreases, the value of the height attribute of block-level elements will be automatically expanded to accommodate the display of inline elements

Display page

Added display of width attribute

Added width attribute to block-level element (div)

Conclusion

①When the width attribute is not set for block-level elements, changes in the browser width will compress the layout of elements embedded in the block element.

②When setting the width attribute of a block-level element, changes in the width attribute value of the browser will not affect the layout of the inline elements in the block-level element. They (inline elements) are affected by the parent block-level element. Elemental influence.

Scope of application: Navigation bar (there are multiple a tags in the navigation bar, which can be placed in a div, and the width attribute is attached to the div to prevent the browser from shrinking and causing the navigation layout to be messed up);

The above is the detailed content of Introduction to the layout of HTML elements inline elements and block-level elements. For more information, please follow other related articles on the PHP Chinese website!