"CSS3" Css3:box-sizing property

This article describes the box-sizing attribute in CSS3, before which the reader needs to prepare the scope of the knowledge width.

Browser Support Scenarios

Browser	suppored	Notes
Internet Explorer	Yes	Version 8.0
Mozilla Firefox	Yes	29.0 2.0-moz-
Chrome	Yes	10.0 4.0-webkit-
Opera	Yes	Version 9.5
Safari	Yes	5.1 3.2-webkit-

Box-sizing Property

The Box-sizing property can have three values: Content-box (Defalut), Border-box property.

1. Content-box,border and padding do not count into width.
2. Border-box,border and padding are calculated into the width.

<style> Div{width:100px;Height:100px;Border:20px Solid Yellow;padding:20px;background:Green;Background-clip:Content-box; }. Content-box{box-sizing:Content-box; }. Border-box{box-sizing:Border-box; }</style>

View Code

Effect:

"CSS3" Css3:box-sizing property