Home > Developer > JavaScript
Css3 box model and css3 Model
Css2.1 box model:
When you define the width and height of the box, if the padding and border values are added, the width and height of the box will be extended.
Height of the box = defined height + (padding-top + padding-bottom) + (border-top + border-bottom );
Box width = defined width + (padding-left + padding-right) + (border-left + border-right );
Css3.0 box model:
After you define the height of the box, if the size of the box does not change after adding the padding and border values, it will shrink to the content area.
The height of the box = the height you define; the width of the box = the width you define;
Usage:
Box-sizing: the box model resolution mode used to control elements
Box-sizing: content-box | border-box | inherit;
The default value is content-box: Maintain the W3C standard box model, that is, the layout of versions earlier than css3.0.
Border-box: redefine the mode composed of the box model.
Inherit: enables the element to inherit the box model of the parent element.
Writing Method (considering compatibility ):
-Moz-box-sizing: border-box;
-- Webkit-box-sizing: border-box;
-Moz-box-sizing: border-box;
-Ms-box-sizing: border-box;
Box-sizing: border-box;
Instance:
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "UTF-8">
<Title> css3 layout </title>
</Head>
<Style>
* {Margin: 0; padding: 0 ;}
. Wrapper {
Width: 960px;
Margin: 0 auto;
Color: # fff;
Background: # cccccc;
Text-align: center;
-Moz-box-sizing: border-box;
-- Webkit-box-sizing: border-box;
-Moz-box-sizing: border-box;
-Ms-box-sizing: border-box;
Box-sizing: border-box;
}
. Header {
Background: # 38382e;
Margin-bottom: 10px;
Border: 10px solid red;
Padding: 10px;
Width: 100%; height: 100px;
Box-sizing: inherit;
}
. Sidebar {
Float: left;
Width: 220px;
Margin: 0px 20px 10px 0px;
Height: 300px;
Background: # 5d33cf;
Border: 10px solid red;
Padding: 10px;
Box-sizing: inherit;
}
. Content {
Float: left;
Width: 720px;
Margin-bottom: 10px;
Height: 300px;
Background: # c8ca30;
Border: 10px solid red;
Padding: 10px;
Box-sizing: inherit;
}
. Footer {
Clear: both;
Width: 100%;
Height: 100px;
Background: # cc4ad5;
Border: 10px solid red;
Padding: 10px;
Box-sizing: inherit;
}
</Style>
<Body>
<Div class = "wrapper">
<Div class = "header"> header </div>
<Div class = "sidebar"> left sidebar </div>
<Div class = "content"> main content </div>
<Div class = "footer"> footer </div>
</Div>
</Body>
</Html>
Effect:
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
