CSS Box Model Introduction

What is a CSS box model? CSS box model is to let us fully understand the positioning function of the P+CSS model, a model that the box model must learn in the Learning p+css layout mode

First, what is CSS?

CSS (cascading style Sheet): Cascading style sheets are a language that separates the content of a Web page from its style, that is, the content of the page in ASPX or HTML, the style of the page in the CSS, and so on.

Second, what is the CSS box model?

The property names commonly heard in Web design: content, padding (padding), Borders (border), boundaries (margin), CSS box models have these properties. These properties are the same as the properties of the boxes in our daily life. Content is the contents of the box, and fill is afraid of things in the box to add the anti-seismic material; The border means the box itself; As for the border, it is important to leave a certain gap between the boxes and keep the ventilation.

Three, two kinds of box model

1. Standard box model

2. IE Box model

If you don't look closely you will think the two pictures are identical, but when you look closely, you will find the similarities and differences between them. Both box models include the four properties of content, padding, border, margin, but the content portion of the IE box model includes padding, border. In general, in order to be compatible with multiple browsers, we use the standard box model and simply add the DOCTYPE declaration.

1), abbreviated form of attribute value

① If two attribute values are given, the former represents the upper and lower attributes, the latter representing the left and right properties.
② if three attribute values are given, the former represents the attributes on, the middle value represents the left and right properties, and the latter represents the property under.
③ if four attribute values are given, the upper, right, bottom, and left properties are represented. That is, sort clockwise.

2), standard flow: The standard flow can be understood as the arrangement of the label, the arrangement of the design label produces block-level elements and inline elements.

3), the classification of elements:

① block-level elements: each block-level element has a row height by default. Represents method <p></p>.

② inline elements: inline elements can be interpreted as one row to hold multiple elements compared to block-level elements. The presentation is <span></span>.

Iv. What is the use of box models?

CSS box model is to let us fully understand the positioning function of the P+CSS model, that is, the use of the box model to replace the layout of the traditional table layout, so the box model is in the Learning P+css layout method must learn a model, This model allows you to understand how the relative position of P and P in a Web page is laid out.