CSS learning notes 06 box model, css learning notes 06 box

CSS learning notes 06 box model, css learning notes 06 box
1. Box Model

The so-called box model is to regard the elements in the HTML page as a rectangular box, that is, a container containing content. Each rectangle consists of the content, padding, border, and margin of the element.

The formula is:Box = border + padding + content area + margin

The inmost part of the element box is the actual content, and the content is directly surrounded by the padding. The padding shows the background of the element. The edge of the padding is the border. The outer border is the outer margin, and the outer margin is transparent by default, so it does not block any subsequent elements.

Note: The background is applied to areas consisting of content, padding, and border.

You can see that the background color has penetrated the content area, the padding area, and the border.

The padding, border, and margin are optional. The default value is zero. However, many elements are configured with the outer and inner margins by the user proxy style sheet. You can overwrite these browser styles by setting the margin and padding values to zero. This can be done separately, or you can use the universal selector to set all elements:

* {    margin: 0;    padding: 0;}

In CSS, width and height indicate the width and height of the content area. Adding the padding, border, and margin does not affect the size of the content area, but increases the total size of the element box.

2. padding

The blank area between the border and content area is called the padding, which is defined by the padding attribute of CSS. The length value or percentage value can be used, but negative values cannot be used (the setting is invalid ).

You can use the following four independent attributes to set the top, right, bottom, and left padding (clockwise)

• Padding-top
• Padding-right
• Padding-bottom
• Padding-left

For example:

The padding attribute is a composite attribute.

• Padding: 10px, indicating that the top, bottom, and left margins are 10px.
• Padding: 10px 12px, indicating that the upper and lower width is 10px, and the left and right are 12px width.
• Padding: 10px 12px 13px 14px; respectively set the width of the left margin from top to right
• Padding: 10px 20px 5px; indicates that the top margin is 10px, the left margin is 20px, and the bottom margin is 5px.

3. Border

The border of an element is one or more lines around the content and padding of the element. The CSS border attribute allows you to specify the style, width, and color of the element border.

3.1. Border Style

You can use the following four attributes to set the top, right, bottom, and left border styles (clockwise)

• Border-top-style
• Border-right-style
• Border-bottom-style
• Border-left-style

Common Border styles include none (default), solid single solid line, dashed dotted line, dotted line, and doubledual solid line.

The style border-style of the same border is also a composite attribute, which is the same as the padding settings.

3.2. Border Width

You can use the following four attributes to set the width of the top, right, bottom, and left border (clockwise)

• Border-top-width
• Border-right-width
• Border-bottom-width
• Border-left-width

Generally, pixel values are used to indicate the Border width. Before setting the Border width, you must set the border style. Otherwise, setting the Border width is meaningless, the border width border-width is a composite attribute, which is the same as the padding setting.

From this we can also see that the background color is penetrating the border of the box.

3.3 border color

Like the border style and Border width, the border color can also be set with four attributes: Top, right, bottom, and Left Border width (clockwise)

• Border-top-color
• Border-right-color
• Border-bottom-color
• Border-left-color

Similarly, the border color border-color is also a composite attribute. It is set to be the same as the border style and border width.

4. Margin

The blank area between element borders is the margin, which is defined by the CSS margin attribute. Any length unit, percentage value, or even negative value can be used.

Similar to the padding, you can use the following four independent attributes to set the top, right, bottom, and left margin (clockwise)

• Margin-top
• Margin-right
• Margin-bottom
• Margin-left

Margin is also a composite attribute, Which is set in the same way as padding.

5. Merge outer margins

The outer margin merge means that when two vertical outer margins meet, they form an outer margin. The height of the merged margin is equal to the larger of the two merged margins.

Outer margin Merge (superposition) is a simple concept. However, it may cause a lot of confusion when layout webpages in practice.
In short, the outer margin merge means that when two vertical outer margins meet, they form an outer margin. The height of the merged margin is equal to the larger of the two merged margins.
When an element appears on another element, the bottom margin of the first element is merged with the top margin of the second element. See:

When an element is contained in another element (if there is no padding or the border separates the outer margin), the upper and/or lower margins are also merged. See:

Although it looks strange, the margin can even be merged with itself.
Suppose there is an empty element with an outer margin but no border or fill. In this case, the top and bottom margins are met together and they will be merged:

If this margin encounters the margin of another element, it will also be merged:

This is why a series of paragraph elements occupy a very small space, because all their margins are merged to form a small margin.
The outer margin merging may seem a bit strange at the beginning, but it actually makes sense. Take a typical text page composed of several paragraphs as an example. The space above the first paragraph is equal to the margin above the paragraph. If no margin is merged, the margin between all subsequent sections will be the sum of the adjacent top margin and bottom margin. This means that the space between paragraphs is twice that at the top of the page. If the outer margin is merged, the upper and lower margins of the paragraphs are merged, so that the distance between the sections is the same.

Note: Only the vertical outer margin of the block box in the normal document flow can be merged. The margin between the inside box, floating box, or absolute positioning is not merged.