CSS layout-Overflow

The overflow attribute defines the display mode of child elements when the child element exceeded the element containing it. If there is too much content, the overflow attribute shows whether the content is displayed and how it is displayed.

The overflow attribute has four possible values:

• Visible: the content is not cut and displayed outside the element;
• Hidden: The content is cut, but the browser does not display the scroll bar, and the remaining content cannot be seen;
• Scroll: the browser displays the scroll bar even if there is enough space to display all the content;
• Auto: if there is too much content, the browser will display a scroll bar to view the remaining content;

Next, let's take a look at the effects of each value:

Overflow: auto;	Overflow: hidden;	Overflow: visible;	Overflow: Scroll;
All frame models are positioned based on the normal element stream in the document at the beginning, and the position attribute allows us to change these natural positions.	All frame models are positioned based on the normal element stream in the document at the beginning, and the position attribute allows us to change these natural positions.	All frame models are positioned based on the normal element stream in the document at the beginning, and the position attribute allows us to change these natural positions.	All frame models are located based on normal element streams in the document.

 

This is basically the content of the layout. There are some advanced features that need to be learned, accumulated, and used by everyone!