In the default css box model definition, the elements of a set width and height will only apply to the content area of the element, if the element has any border or padding, drawn to the width and height of the screen and add border padding, so when you adjust the width and height of an element should always pay attention to the border and padding of this element, especially when doing a responsive layout, this feature becomes more apparent.
box-sizing property has two values:
① content-box: By default, the standard box model. width and height and width comprising only the high content, not including the frame (border), the padding (padding), margins (margin).
The formula is:
Width = width content
height height = content
② border-box: width and height attributes including content, padding and borders, but does not include margins. Note: border-box does not contain a margin.
The formula is:
width = width of the border padding + + content
height = height of the border + padding + content
Examples
effect
