What is the css box model?

css box model refers to the "box model", which is essentially a box that encapsulates the surrounding HTML elements. It includes margins, borders, padding and actual content; all HTML elements can be regarded as boxes, and the box Models allow us to place elements in the space between other elements and the surrounding element's borders.

Commonly heard attribute names in web design: content, padding, border, margin, CSS The box pattern has these properties.

The term "box model" is used in design and layout.

We can understand these attributes using a metaphor of a common thing in daily life - a box, so we call it the box pattern.

The CSS box model is a thinking model used by CSS technology that is often used in web design.

Principle

Let’s first talk about our web page: content, padding, border, margin, CSS The box pattern has these properties.

We can understand these attributes by transferring them to the boxes (boxes) in our daily life. The boxes we see in our daily life are also a kind of box that can hold things. They also have these attributes, so they are called It's box mode.

Features

Imagine a box, it has four: margin, border, padding, and content Attribute;

Let us look down at this box. It has four sides, top, bottom, left and right, so each attribute includes four parts in addition to content: top, bottom, left and right; these four parts can be set at the same time or separately. Settings; the inner margin can be understood as the distance between the content in the box and the border, and the border is divided into thickness and color. The content is the content in the middle of the box, and the outer margin is the blank space automatically left outside the border.

Structure

Content (CONTENT) is what is in the box;

and padding (PADDING) is afraid of what is in the box (valuable () foam or other anti-seismic accessories added due to damage;

Border (BORDER) is the box itself; as for the border (MARGIN), it means that when the boxes are placed, they cannot all be piled together, and a certain amount of space must be left. Gaps maintain ventilation but also allow for easy removal. In web design, content often refers to text, pictures and other elements, but it can also be small boxes (DIV nested). Unlike boxes in real life, things in real life generally cannot be larger than boxes, otherwise the box will be stretched Broken, and the CSS box is elastic. The things inside are larger than the box itself and will stretch it at most, but it will not be damaged.

Padding has only width attribute, each HTML tag can be regarded as a box;

The above is the detailed content of What is the css box model?. For more information, please follow other related articles on the PHP Chinese website!