Box model
A web page has a lot of html elements, and each html element can be represented as a rectangular box, CSS box model describes precisely the existence of these rectangular box.
CSS box model has four sides: Margin edge (Edge Margin) , border edge (Border EGDE) , the filling side (the Padding Edge) , the content side (the Content Edge) , the four sides from the inside it is divided into four regions : content area , padding areas , border areas , margins area (content area, padding area, border area and margin area).
- Content area (Content area) is an area that contains the real content of the element
- Padding area (Area Padding) it is extending into the border surrounding the Padding. If the Content area set the background color or picture, these styles will be extended to Padding.
- Frame region (Border area) comprising a border region, padding the extended area.
- Margin region (Margin area) extended with blank frame region area to separate adjacent elements.
Their size can be controlled by the CSS properties (width, height, padding, border and margin).
box-sizing (CSS3 properties)
1. The value of the box-sizing
box-sizing: content-box; /*默认值*/
box-sizing: border-box;2. box-sizing effect
Box-sizing of the role is to tell the browser box model using the W3C box model, or IE box model.
When the box-sizing value of content-box (default), its size is calculated as:
width = content-width;
height = content-height;When the box-sizing value of border-box, its size is calculated as:
width = content-width + padding-left + padding-right + border-left-width + border-right-width;
height = content-height + padding-top + padding-bottom + border-top-height + border-bottom-height;No matter what value, the size of the box is the same, it is not the same as the capacity of the box:
