CSS Design Guide: Understanding the Box Model_html/css_WEB-ITnose

1. Understanding the box model

Each element will generate a box on the page. Therefore, an HTML page is actually made up of a bunch of boxes. By default, the border of each box is invisible and the background is transparent, so we cannot directly see the structure of the boxes on the page. Using the "OutLine"->"OutLine Level Element" menu item in the WebDeveloper toolbar, you can easily display the border and background of the box, allowing us to examine the composition of the page from another angle.

1.1 Attributes of the element box

1. Border: You can set the width, style and color of the border.

2. Padding: You can set the distance between the box content area and the border. Imagine that the padding is pushing the content of the element inward from the border.

3. Margin: You can set the distance between the box and adjacent elements. Imagine that the margin is the border pushing other elements outward.

1.2 Box border

The border has three related attributes: width (border-width), style (border-style), color (border-color)

1.3 Box padding

Padding is the distance between the box content area and the box border. If If the padding value is not set, the text of the element will be close to the margin of the element. As shown in the figure below, if the width is explicitly set, the setting of the padding value will increase the width of the box.

1.4 Box margins
1. As shown in Figure 4, by default, there will also be margins between elements,


It is recommended to use the following rule as the first rule of the style sheet: * {margion:0 ;padding=0;}. This rule sets the default margins and padding of all elements to zero.

2. Vertically stacked margins

As shown in the picture above, Div2 has a top margin set, Div3 has no margin set, but the distance between Div1 and Div2 is the same as the distance between Div2 and Div2 The spacing of Div3 is the same, which means that the margin-top set by Div2 at this time does not work.
In other words, the wider margin determines how far away the two elements are. If you set the margin-top of Div2 to 15, the effect will be as shown below. You can see that the distance between Div1 and Div2 has become wider.

Note: Only vertical margins are superimposed, horizontal margins are not superimposed. For horizontally adjacent elements, their horizontal spacing is the sum of adjacent margins.

2. How big is the box

2.1 Block element (block element)
1. No width
The so-called no width means that the element is not explicitly set The width attribute of the block-level element. If the width attribute of the block-level element is not set, the default value of this attribute is auto. As a result, the width of the element will be expanded to the same
width as the parent element. Elements that don't explicitly set the width attribute will always expand to fill the width of their parent element. Adding margins will cause the element box to become smaller.

2. Set the width
Adding borders, padding and margins to a box with a set width will cause the box to expand wider. The amount of expansion is equal to the sum of the horizontal border and padding.


2.2 Inline elements

1. No width
Inline elements will expand to a width sufficient to wrap their content. Adding padding and horizontal borders will result in liline The element becomes wider by an amount equal to the sum of its horizontal border and padding.
2. Block-level elements with width
Adding borders, padding and margins to a box with a set width will cause the box to expand wider. The amount of expansion is equal to the sum of the horizontal border and padding.

3.2.3
CSS3 adds a new box-sizing attribute, through which a box with a width can also be set to have the default auto state behavior.