Learn CSS layouts-box-sizing

Source: Internet
Author: User

Box-sizing

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

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.