css3 box model_html/css_WEB-ITnose

css2.1 box model:

When you define the width and height of the box; if you add padding and border values, the width and height of the box will be expanded

The height of the box = the defined height (padding-top padding-bottom) (border-top border-bottom);

The width of the box = the defined width (padding-left padding-right) ( border-left border-right);

css3.0 box model:

When you define the height of the box; if you add padding and border values, the box size will not change Change, it will shrink to the content area.

The height of the box = the height you define; the width of the box = the width you define;

Usage:

box-sizing: a box model used to control elements Parsing mode

box-sizing:content-box | border-box | inherit;

The default value is content-box: maintain the W3C standard box model, which is the layout of versions before css3.0

Border-box: Redefine the pattern composed of box models.

inherit: Make the element inherit the box model mode of the parent element.

Writing method (for compatibility):

-moz-box-sizing: border-box;
--webkit-box-sizing: border-box;
-moz- box-sizing: border-box;
-ms-box-sizing:border-box;
box-sizing: border-box;

Example:

Header

Leftbar

Main content

Footer

Effect: