Css3 Box model and Box-sizing, css3box-sizing

Source: Internet
Author: User

Css3 Box model and Box-sizing, css3box-sizing

1. Box Model)

The Box Model in CSS is divided into two types: W3C standard Model and IE traditional Model. Their similarities are the calculation relationship of the width, height, padding, border, margin, and actual size of the elements. The difference between them is that the calculation methods of the two are inconsistent.

1) W3C standard Box Model:

/* Outer box size calculation (element space size) */Element space height = content height + padding + border + marginElement space width = content weight + padding + border + margin/* inner box size calculation (Element size) */Element Height = content height + padding + borderElement Weight = content weight + padding + border

2) Traditional IE Box Model (IE6 or earlier, excluding IE6)

    

/* Outer box size calculation (Element space size) */Element space Height = Content Height + margin (Height includes the Element Content Height, border Height, and padding Height) element space width = Content Weight + margin (Height includes the Element Content width, Border width, and padding width)/* inner box size calculation (Element size) */Element Height = content Height (Height includes the Element content Height, border Height, and internal border Height) element Weight = content Weight (Weight includes the Element content width, Border width, and internal border width)

Currently, most browser elements are based on the W3C standard Box Model, but some elements in form are based on traditional Box models, such as submit, reset, button, and select elements in input, in this way, if we set border and padding for it, it will only extend inward.

2. Box-sizing: content-box | border-box | inherit

1) content-box: this value is its default value, which allows elements to be displayed in the W3C standard Box Model, that is, the width and height of the elements) equal to the border of the element (border) plus the padding of the element (padding) plus the content width or height of the element (content height)

2) border-box: This value allows the elements to be displayed in the traditional IE Box Model (earlier than IE6), that is, the width and height of the elements) it is equal to the content width and height of the element ). Content width and content height contain the border, padding, content width, and content height of the element.

Box-sizing supports all browsers, but only IE8 or later versions are supported in IE. Although modern browsers support this, Some browsers still need to add their own prefixes, -moz-must be added to Mozilla,-Webkit-must be added to webkit kernel,-0-must be added to Presto kernel, and-ms-must be added to IE8 kernel -, therefore, when box-sizing is compatible with browsers, you must add their respective prefixes.

/*Content box*/Element {  -moz-box-sizing:content-box;  -webkit-box-sizing:content-box;  -o-box-sizing:content-box;  -ms-box-sizing:content-box;  box-sizing:content-box;          }/*Border box*/Element { -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;                  }

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.