The Magic CSS box model _CSS

CSS box model: A rectangular area that is used to load elements on a page. The box model in CSS includes the IE box model and the Standard Model of the consortium. Both box models contain four components: content, padding (padding), Borders (border), boundaries (margin), which contain top/right/bottom/left four components.

So what's the difference between the two box models? Let's take a look at the following two pictures:

From the diagram we can see that the main difference between the two box models is the range of width, in the standard box model, width refers to the content of the breadth, in the IE box model, width represents content+padding+ Border the width of these three parts, so this makes the width of the entire box a difference:

Box width of standard box model: Left and right margin+ around border+ padding+width

Box width of IE box model: left and right Margin+width

In CSS3, the box-sizing attribute is introduced, and the Box-sizing:content-box is used to represent the standard box model.

Box-sizing:border-box represents the IE box model. The default is the standard box model, and a closer look at the two graphs shows the difference between them:

(1) The first one is the standard box model:

(2) The second one is IE box model:

Having said these two box models, let's talk about the margin properties of the box model: (1) margin can achieve a fixed-width layout:

After adding margin: You can achieve one side of the fixed width layout

(2) margin can change the size of the element occupied:

(1) Block/inline-block horizontal elements are applicable

(2) is not related to whether to set the Width/height value

(3) applicable to the horizontal and vertical direction

As can be seen from the above diagram, when changing the value of margin, the size of the container will also change.

(3) The relationship between margin and percent units (the percentage of normal elements and the percentage of absolute positioning):

(1) The percentage of margin of ordinary elements is calculated relative to the width of the container.

(2) The percentage of absolute positioning margin is determined relative to the width of the first positioning (relative/absolute/fixed) ancestor element.

(4) overlap of margin:

(1) margin overlap occurs only on the horizontal element of the block. (excluding Float/absolute elements)

(2) margin overlap perpendicular direction, margin-bottom/margin-top direction. The writing format is not considered.

Three scenarios in which margin overlap occurs:

(1) Adjacent sibling elements

(2) The parent element and the first or last child element

(3) Empty block element

A, there is overlap between neighboring sibling elements

B, the parent element and the first or last child element

The results of all three of these cases are

The condition in which the parent element and child element occur margin overlap:

(1) margin-top overlap:

A The parent element is a non-blocky format context element

b The parent element has no border-top properties

C The parent element has no padding-top properties

D There is no inline inline element between the parent element and the first child element

(2) Margin-bottom overlap:

A The parent element is a non-blocky format context element

b The parent element has no border-top properties

C The parent element has no padding-top properties

D There is no inline inline element between the parent element and the first child element

E The parent element has no height,min-height,max-height restrictions

How to prevent margin overlap between the parent element and its own element:

(1) Prevent margin-top overlapping:

A Add Overflow:hidden to the parent element;

b Add the border-top:1px solid #000 to the parent element;

C Add padding-top:1px to the parent element;

D Adds an inline element between the parent element and the first child element.

(2) Prevent margin-bottom overlapping, similar to the above, can also set the height of the parent element to eliminate margin overlap.

C, margin overlap of empty block elements

The effect is son div only 1em is not 2em.

Some of the conditions in which an empty block element occurs margin overlap:

A. There are no border settings in the element

B. There are no padding settings in the element

C. Inline elements with no inline in the element

D. No hieght/min-height settings

How to prevent margin overlap of empty blocks:

A. Set a border to the son element

B. Set a padding for the son element

C. Set a inline inline element for the son element

D. Set a height for the son element

Margin rules of calculation:

(1) Positive to take large value

(2) Add plus and minus values

(3) Negative negative maximum negative value

A Is getting a large value

Add Plus and minus values:

Negative minus negative:

The adjacent overlapping absolute value takes the maximum negative value, the negative overlapping absolute value takes the maximum negative value, its overlapping height is 0

(5) Some applications of Margin:auto:

The above example why the picture is not horizontally centered. This is because the picture at this time is inline level, even if not set the width does not occupy the entire container, the solution is to set the IMG display to Display:block can achieve horizontal center. (Because the picture is a replacement element)

Why the container has been fixed wide, why margin:0 Auto is not centered.

So how do you set the center of the element?

A. vertically centered through Writing-mode. Change the direction of the stream to a vertical direction.

B. The margin implementation of an absolute positioning element is centered vertically, supported only by browsers above ie8+.

(6) The application of margin negative value:

(1) margin to achieve justification

(2) margin distribution of negative values: changing the Occupy space of elements

(3) Two-column adaptive layout with negative margin: element occupy space changes as margin moves

(7) Margin in some cases will be effective, why.

(1) The margin on the vertical direction of the inline horizontal element is invalid

Prerequisite: element is a non replaceable element, such as not an IMG element; normal writing mode

(2) margin overlap may occur

(3) The margin value of the Display:table-cell/display:table-row is invalid, but the margin value of the display:table-cell/display:table-row of the replacement element is valid

(4) The Absolute positioning element img Sets the top and left values, and the position of the picture is not changed even if the margin-right or Margin-bottom values are set.

To implement adding margin-right or Margin-bottom, add position:relative properties to the container.

(5) The margin value is too small to make the margin property ineffective:

(6) The margin void caused by the inline attribute is aligned with the lower edge of the inline element, so when the margin-top of the picture is small to a certain value, the value of the margin-top will not change the position of the picture.

(8) Understand the Margin-start/margin-end property.

(1) In normal flow, Margin-start is equivalent to Margin-left, and the two are overlapping and not cumulative. (in a stream from left to right)

(2) If the horizontal flow is from right to left, Margin-start and margin-right are equivalent.

(3) in the direction of vertical flow, (writing-mode:vertical-*) Margin-start is equivalent to Margin-top.

(9) Understanding Margin-collapse Properties

-webkit-margin-collapse:<collapsed>|<discard>|<separate>

<collapsed> default/overlap

<discard> Cancel

<spearate> separation