Learn to make a mobile page 2.
The properties of a CSS3 are described first. Box-sizing This attribute is the border and padding of the box model are counted.
Code that is not using box-sizing
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>Box-sizing</title>6 7 <style>8 Div{9 Ten width:200px; One Height:200px; A padding:10px 20px 30px 40px; - Border-style:Solid; - Border-color:#f00; the Border-width:10px 20px 30px 40px; - background:Orange; - - } + </style> - </Head> + <Body> A <Div></Div> at </Body> - </HTML>
Code and model diagram after using box-sizing (contents of box =width-border-padding)
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>Box-sizing</title>6 7 <style>8 Div{9 Ten width:200px; One Height:200px; A padding:10px 20px 30px 40px; - Border-style:Solid; - Border-color:#f00; the Border-width:10px 20px 30px 40px; - background:Orange; - /*Border-box This means that the defined width and height are those that include border and padding - The width and height of the real box is Width-padding-border + */ - -webkit-box-sizing:Border-box; + -moz-box-sizing:Border-box; A box-sizing:Border-box; at } - </style> - </Head> - <Body> - <Div></Div> - </Body> in </HTML>
Learn to make a mobile page 2
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
