What does the CSS box model mean?

CSS box models all have attributes such as content, padding, border, and margin. These attributes can be understood by using the common thing "box" in daily life as a metaphor, so it is called Box model.

CSS (Cascading Style Sheet) can be translated as "cascading style sheet" or "cascading style sheet". It defines how to display HTML elements and is used to control The appearance of the web page. By using CSS to separate the content and presentation of the page, work efficiency is greatly improved. CSS assumes that all HTML document elements generate a rectangular element box that describes the space occupied by the element in the HTML document layout, which can be visualized as a box. CSS has developed a "box model" concept around these boxes. By defining a series of box-related properties, it can greatly enrich and promote the performance and layout structure of each box and even the entire HTML document. For elements that are boxes, if there is no special setting, they will always occupy a separate line by default, and the width is the width of the browser window. The elements before and after it, whether they are boxes or not, can only be arranged above or below it, that is, Arrange them cumulatively up and down. Each box in an HTML document can be seen as consisting of four parts from inside to outside, namely content, padding, border and margin. CSS defines a series of related properties for the four parts. By setting these properties, you can enrich the performance of the box.

Video tutorial recommendation: "CSS tutorial collection-PHP Chinese website"

Box model composition

Content area (content)

The content area is the center of the box model. It presents the main information content of the box, which can be text, pictures, etc. The content area has three properties, width, height and overflow. Use the width and height attributes to specify the height and width of the box content area. When there is too much content information and exceeds the scope of the content area, you can use the overflow attribute to specify the processing method. When the overflow attribute value is hidden, the overflow part will not be visible; when it is visible, the overflow content information is visible and is just presented outside the box; when it is scroll, the scroll bar will be automatically added to the box, and the user can Pull the scroll bar to display content information; when it is auto, the browser will decide how to handle the overflow part.

Padding

Padding is the space between the content area and the border. There are five padding attributes, namely padding-top, padding-bottom, padding-left, padding-right, and the quick padding attribute padding that combines the above four directions. Use these five attributes to specify the distance between the information content of the content area and the borders in all directions. When setting the box background color property, you can make the background color extend into the filled area.

Border (border)

The border is the boundary surrounding the content area and padding. The properties of the border include border-style, border-width and border-color, as well as the shortcut border property border which combines the above three properties. The border-style attribute is the most important attribute of the border. If the border style is not specified, other border attributes will be ignored and the border will not exist. CSS specifies nine border styles, including dotted (dotted line), dashed (dotted line), and solid (solid line). Use the border-width attribute to specify the width of the border. The attribute value can be a length measurement value, or it can be thin, medium, and thick specified by CSS. Use the border-color attribute to specify the corresponding color for the border. The attribute value can be an RGB value or the 17 color names specified by CSS. When setting the above three border attributes, you can either perform quick settings for the overall four directions of the border, or you can perform specific settings for the four directions, such as border: 2px solid green or border-top-style: solid, border- left-color: red, etc. When setting the box background color attribute, the background will not extend to the border area in IE, but in standard browsers such as FF, the background color can extend to the border area, especially when the single border is set to a dotted line or a dotted line, the effect can be seen .

Blank margin (margin)

The margin is located at the outermost edge of the box and is the space added around the outside of the border. White space prevents boxes from being tightly connected together and is an important means of CSS layout. There are five attributes of the margin, namely margin-top, margin-bottom, margin-left, margin-right, and the shortcut margin attribute margin that combines the above four directions. Its specific settings and usage are similar to the fill attribute. For two adjacent (horizontally or vertically) boxes with a blank side value set, the blank sides of their adjacent parts will not be the sum of the two blank sides, but the union of the two. If the adjacent blank border values ​​​​of the two are not equal in size, the larger value of the two is used. At the same time, CSS allows you to specify negative values ​​for the margin property. When a negative margin value is specified, the entire box will move in the opposite direction of the specified negative value, thereby creating an overlapping effect of the boxes. Elements in a web page can be moved by specifying positive and negative margin values, which is an important method in CSS layout technology.

Recommended tutorial: "CSS Tutorial"

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