1. The production process of the page
Designer - design draft - front-end engineers
Design draft = front end engineer + divided areas + filling contents
With a suitable element to represent different regions , the position of the setting area, size, background style .
Each element generates a rectangular area on the page , the CSS said rectangular region a box (Box)
2. The said box model overview
Margin: outer border, and the other from the box.
Border: Border
The Padding : distance inside the border, border and content.
Conten width and height of the content.
One element, what kind of box, depending on its CSS 's display attributes .
3. box contents
CSS size units
In CSS , there are many attributes of value, must be represented by a dimension , a dimension of value and unit composition, CSS dimensions in common units: PX { pixel, the absolute size of the computer screen by a number of small dots, each a point is a pixel }
E m { relative sizes, relative to the current font size of the element (px)}
{% Percentage, in different CSS properties, have different meanings }
So other unit of measure, calculated after the browser will become px
padding padding, stuffing region Meaning: Represents the content that the distance between the border, into an upper ( Top ), the right ( right ), padding-bottom lower ( bottom ), left ( left ) four directions, like a box, and filler between the inner space; related CSS attributes: padding-Top , padding-right , padding-left .
Border Border meanings: dividing the inner and outer boundaries, the upper (Top) , the right (right) , lower (bottom) , left (left) four parts, similar to the case wall; Related CSS properties: border-Top on the frame , border-right-XXX have a border,
border-bottom-XXX bottom border, border-left-XXX left border, border-width border thickness, border-style border style, border-Color border color.
margin Margin Meaning: Represents the distance between the adjacent frame and the box is divided into upper ( Top ), the right ( right ), lower ( bottom ), left ( left four directions) similar to the distance between the box and the box, particularly rules are complex, elaborate visual formatting model; related CSS properties: margin-Top , margin-right , margin-bottom , margin-left , margin .
4. box model knowledge supplement
Sub- box frame cassette ( border-Box ): a border , padding , Content composition, background elements, borders and default coverage [presentation], by background-clip modifying properties.
Filling box ( padding-Box ): the padding , Content composition, in the strict sense, overflow refer to the overflow, filling refers to overflow box [presentation].
SUMMARY cartridge ( content-Box ): a content composed, by default, width and height properties, it is the width and height of the content box, width and height of the setting range, by box-sizing property changes, box-sizing property Meaning : box width and height setting range.
Box dimensions calculated: Box-Sizing: Content-Box in the case of, Box-Sizing: Box-border case is, Outline outer frame attribute, and the use of border exactly.