Home > Developer > Web Develop
People slowly realized that the traditional box model was not straightforward, so they added a new box-sizing CSS property called.
When you set an element to be, the padding box-sizing: border-box; and border of this element no longer increases its width.
Here is an example of the same as the previous page, the only difference is that two elements are set box-sizing: border-box;
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Box-sizing</title> <style> /** {box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; }*/. Simple{width:400px;Height:200px;Border:1px solid Red;margin:20px Auto;box-sizing:Border-box;-webkit-box-sizing:Border-box;-moz-box-sizing:Border-box;-ms-box-sizing:Border-box;-o-box-sizing:Border-box; }. Fancy{width:400px;Height:200px;Border:1px solid Red;margin:20px Auto;padding:50px;box-sizing:Border-box;-webkit-box-sizing:Border-box;-moz-box-sizing:Border-box;-ms-box-sizing:Border-box;-o-box-sizing:Border-box; } </style></Head><Body> <DivID= "simple"class= "simple">I'm simple.</Div> <DivID= "Fancy"class= "Fancy">I'm as big as simple.</Div> <Script> varODiv1=Document.queryselector ('#simple'); Console.log (Odiv1.offsetwidth, odiv1.offsetheight); varODiv2=Document.queryselector ('#fancy'); Console.log (Odiv2.offsetwidth, odiv2.offsetheight); </Script></Body></HTML>
Results:
Since there is no better way, some CSS developers want all the elements on the page to behave like this.
So the developers put the following CSS code on their page:
{ box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; }This ensures that all elements will be typeset in this more intuitive way.
However box-sizing , it is a very new attribute and you should now use and prefix as I did in the example above -webkit- -moz- .
This enables features in a specific browser experiment. Also remember that it supports ie8+.
Original address: http://zh.learnlayout.com/box-sizing.html
Learn CSS layouts-box-sizing
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
