Novice's HTML5 Road DAY 09-----Box Model

1 Box model

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

1.1 Box border (border)

You can set the size of the border and the style attributes of the border line

You can also set the radius of the border corner

border-radius

1.2 Padding

The padding attribute is used to set the padding. Refers to the distance between the border and the content.

padding-top: top padding

padding-right: right padding

padding-bottom: bottom padding

padding-left: left inner margin

Setting the padding property will affect its own border size

1.3 Margin

The margin property is used to set the outer margin. Setting margins creates "white space" between elements, and this white space usually cannot be used for other content.

margin-top: upper margin

margin-right: right margin

margin-bottom: bottom margin

margin-left: upper margin

Margin: top margin, right margin, bottom margin, left margin

The order of values ​​is the same as the padding.

1.3.1 Outer margins to achieve box centering

To make a box horizontally centered, the following two conditions need to be met:

1. Must be a block-level element.
2. The box must have a width (width)

Then set the left and right margins to auto to center the block-level elements horizontally.

This method is often used for web page layout in actual work. The sample code is as follows:

Set the margin attribute margin:0px auto;

1.3.2 The difference between the centered image and the background of the text box

1. The horizontal centering of the text is text-align: center

2. Change the left and right margins of the box horizontally to auto

3. Insert pictures we use most, such as product display

4. Background image we generally use small icon background or super large background image

   text-align: center; /* The text is centered horizontally /
   margin: 10px auto; / The box is horizontally centered, left and right margins are changed to auto to make it wider*/

1.3.3 Clear the default inner and outer margins of elements

* {
   padding:0;         /* 清除内边距 */
   margin:0;          /* 清除外边距 */
}

Note: Inline elements have only left and right margins, but no top and bottom margins. Inner margins will also have problems in lower version browsers such as ie6. We try not to specify upper and lower inner and outer margins for inline elements.

1.3.4 Merging of the vertical margins of adjacent block elements

When two adjacent block elements meet, if the upper element has a lower margin-bottom and the lower element has a upper margin-top, then the vertical spacing between them is not margin-bottom and margin-top The sum, but the larger of the two . This phenomenon is called the merger of the vertical margins of adjacent block elements (also called margin collapse).

These two divs are adjacent to each other. **The upper div is set with margin-bottom: 100px, and the lower div is set with margin-top: 100px, but the spacing between them is not 100+100px, but the largest one , **Pay special attention to when writing.

1.4 Layout stability of the box model

Starting to learn the box model, the biggest puzzle for the students is that they can’t distinguish the use of inner and outer margins, when to use inner margins, and when to use outer margins?

The answer is: In fact, they can be mixed in most cases. In other words, you can use inner margins or outer margins. Use whichever you find convenient.

However, there is always one that is best to use. We divide it according to stability. The suggestions are as follows:

In accordance with the first use of width (width), followed by padding (padding) and then outer margin (margin).

  width >  padding  >   margin   

the reason:

1. Margin will have the margin merging and the bug of doubling the margin under ie6 (hate), so it is used last.
2. Padding will affect the size of the box, and it needs to be added and subtracted (troublesome).
3. There is no problem with width (hipi) We often use the width remaining method and the height remaining method to do it.

1.5 CSS3 box model

In CSS3, the box model can be specified by box-sizing, which can be specified as content-box, border-box, so that the way we calculate the box size has changed.

It can be divided into two situations:

1. Box-sizing: content-box box size is width + padding + border content-box: this value is its default value, which allows the element to maintain the W3C standard Box Mode

2. Box-sizing: The border-box box size is width, which means that padding and border are included in width

Note: The width marked above refers to the width: length set in the CSS property, and the value of content is automatically adjusted.

To put it bluntly, what is the center, border-box: This is centered on the border, giving priority to ensuring that the size of the border does not change with the content.

content-box ( default value ): This is centered on the content, the box size is width + padding + border, and the shape will change with padding, margin, and content changes . **

1.6 Box shadow

> box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色  内/外阴影；

1. The first two attributes must be written. The rest can be omitted.
2. Outer shadow (outset) but you can’t write the default inner shadow inset