Box-related styles and related styles

Box-related styles and related styles

CSS Box Structure

The box model in CSS is used to describe a rectangle box formed by HTML elements. The CSS box-like model also involves adjusting the outer margin, border, inner margin, and content for each element.

ContentContent, which can be text, images, and other elements.
PaddingIt refers to the padding, which is also called blank and inner patch. It is mainly used to set the distance between the content and the border, just like a buffer band.
BorderBorder, used to set the Border Width and style of the content.
MarginIt refers to the outer margin, also known as the Border. Used to set the distance between a piece of content and a piece of content.

<! DOCTYPE html> In the default layout, when an element contains content, width and height are automatically adjusted to the height and width of the content.

In CSS, boundaries are also called external patches. The simplest method is to use the margin attribute. It can accept any length unit, such as pixels, lbs, inches, or

Meters, percentages, etc. This attribute can have 1 ~ Four values.


Margin: <top> <right> <bottom> <left>

You can use the border attribute to set the border of a webpage element. This attribute allows you to define the style, width, and color of all borders of a webpage element.


Border: width style color


Content Overflow
The overflow attribute retrieves or sets how to manage content when the object content overflows its specified height and width.
Overflow: visible auto hidden scroll
VisibleDo not cut the content or add a scroll bar. If this default value is declared, the object is cut to the size of the window or frame containing the object. In addition, the clip attribute settings are invalid.
AutoThis is the default value for the body object and textarea. Cut the content and add a scroll bar as needed.
HiddenContent beyond the object size is not displayed.
ScrollAlways display the scroll bar.
In addition, the overfllow-x and overflow-y attributes are included, and their parameters are similar to those of overflow.



Control browser behavior
The box-sizing attribute allows you to specify the browser behavior by calculating the width of an element.
Box-sizing: content-box border-box inherit
Content-boxThe browser's interpretation of the Box Model complies with W3C standards.
Border-boxThe browser interprets the box model as ie6.


Area scalability
The resize attribute allows the area of the element to be scaled to adjust the size of the element. Applicable to any container that obtains the "overflow" attribute conditions.
Resize: none both horizontal vertical inherit
NoneThe user agent does not provide a dimension adjustment mechanism, and the user cannot manipulate the mechanism to adjust the size of elements.
BothThe User Agent provides a two-way dimension adjustment mechanism, allowing you to adjust the width and height of elements.
HorizontalThe User Agent provides a one-way horizontal dimension adjustment mechanism, allowing you to adjust the width of elements.
VerticalThe User Agent provides a one-way vertical dimension adjustment mechanism, allowing you to adjust the height of elements.
InheritDefault inheritance.