css3 box-sizing property


  Translation results：

box

英[bɒks] 美[bɑ:ks]

n.Box; box-like object; box; sentry room

vt. Put... into a box [box, box]

vt.& vi.Boxing

Third person singular: boxes Plural: boxes Present participle: boxing Past tense: boxed Past participle: boxed

sizing

英['saɪzɪŋ] 美['saɪzɪŋ]

n. Sorting; rubber material; slag grinding; processing according to size

css3 box-sizing propertysyntax

Function: Allows you to define specific content adapted to a certain area in an exact way.

Note: Internet Explorer, Chrome, Safari and Opera support the box-sizing attribute. Firefox requires the prefix -moz-.

The box-sizing attribute in css3 allows you to define specific elements that match a certain area in a specific way. It has two values: content-box, which means that the actual width is the sum of width, border, and padding; border -box means that the actual width is equal to the width value



css3 box-sizing propertyexample

<!DOCTYPE html>
<html>
<head>
<style> 
div.container
{
width:30em;
border:1em solid;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
border:1em solid red;
float:left;
}
</style>
</head>
<body>

<div class="container">
<div class="box">这个 div 占据左半部分。</div>
<div class="box">这个 div 占据右半部分。</div>
</div>

</body>
</html>

Run instance »

Click the "Run instance" button to view the online instance

Popular Recommendations

Home

Videos

Q&A

submit