CSS box model_html/css_WEB-ITnose

The CSS box model is the basis for most CSS layout and positioning. It describes each element in a web page as a bounded box containing 4 components. The schematic diagram of the box model is shown in the figure below.

The size of the box = content size (width height) padding border thickness (border) margin

1. When setting the background for an element

IE scope: content padding

Firefox scope: content padding border

2. border

border- color: red green; The top and bottom are red, the left and right are green

Border-width: 1px 2px 3px; The top width is 1px, the left and right width is 2px, the bottom width is 3px

Border-style : dotted dashed solid double; The upper, right, lower and left edges are: dotted line, dotted line, solid line, double line

3. margin

1. If there are two blocks arranged one above the other For level elements, set margin-bottom for the first block-level element and set margin-top for the second block-level element. Then the distance between the two elements is not the sum of margin-bottom and margin-top, but the two. The larger one, this phenomenon is called the "collapse" phenomenon of margin, also called margin merging. It means that the smaller margin collapses into the larger margin. Therefore, in actual operation, when the page effect does not change after modifying some margin values, don’t be fooled by the appearance.

2. When two elements have a parent-child relationship, that is, when one element contains another element, the margin of the child block will be based on the content of the parent block. When the height of the parent block and child block is determined, and the height of the child block exceeds the height of the parent block, IE and Firefox will have two completely different processing methods:

IE: will automatically expand the parent block to keep the child The space of the element's margin-bottom and the space of the parent element's own padding-bottom

Firefox: The child element will exceed the scope of the parent element

From the standard specification of CSS, IE's processing The method is non-standard. Although it may be more in line with the original intention of the front-end developer, the way it is done should be borne by the min-height attribute