Css3.0 preemptive view (9): Box-sizing changes the structure of the Box Model

Article fromWww.css3s.cn

The box model of the vertical Div contains four parts: margin, border, padding, and content. there is no need to make an axe to the relationship between the four. but I still need to talk about the theme as it is today, that is, the border is padding, And the padding is content. however, we can break this structure in css3.0. it is border in the content, and padding in the border. to achieve this, you must establish the following conditions: Box-dizing: border-box;

The following is an example. This example is for Firefox, because only Firefox, Safari 3, and opera are supported currently.

 

Text Content.

The Code is as follows:

<Style type = "text/CSS">
Div. Container {
Width: 400px;
Border: 10px solid black;
Height: 40px;
}

Div. Split {
-Moz-box-sizing: border-box;
Width: 50%;
Height: 40px;
Border: 10px Silver Ridge;
Float: left;
Padding: 5px;
}
</Style>
<Div class = "Container">
<Div class = "split"> text content </div>
<Div class = "split"> text content. </div>
</Div>

If you are interested, you can use firebug in Firefox to check the vulnerability.
Article fromWww.css3s.cn