JavaScript: The Definitive Guide, Sixth Editio javaScript权威指南(第6版) pdf 文字版-文字版, javascript电子书, 和javascript 有关的电子书: The border-box model and the box-sizing property The border-box model and the box-sizing property

The standard CSS box model specifies that the width and height style properties give the size of the content area and do not include padding and borders. We might call this box model the “content-box model.” There are exceptions to the content-box model in old versions of IE and also in new versions of CSS. Before IE6, and when IE6, 7, or 8 displays a page in “quirks mode” (when the page has no or has an insufficiently strict doctype), the width and height properties do include the padding and border widths.

IE’s behavior is a bug, but IE’s nonstandard box model is often quite useful. Recognizing this, CSS3 introduces a box-sizing property. The default value is content-box, which specifies the standard box model described above. If you instead specify boxsizing:border-box, the browser will use the IE box model for that element, and the width and height properties will include border and padding. The border-box model is particularly useful when you want to specify the overall size of an element as a percentage but also want to specify the border and padding size in pixels:

16.2 Important CSS Properties | 425

The box-sizing property is supported by all current browsers but is not yet universally implemented without a prefix. In Chrome and Safari, use -webkit-box-sizing. In Fire-fox, use -moz-box-sizing. In Opera and IE8 and later, you can use box-sizing without any prefix.

A future CSS3 alternative to the border-box model is the use of calculated values for box dimensions:

友情链接It题库(| 版权归yishouce.com所有| 友链等可联系|粤ICP备16001685号-1