CSS3 ??? ??
box-sizing ??
? ???? ?? ??? ???? ?? ??? ?? ???? ??? ? ????.
???: content-box
JavaScript ??: object.style.boxSizing="border-box"
Syntax
box-sizing: content-box|border-box|inherit;
content-box : ??? ??? ??? ??? ??? ??? ?????. ??? ??? ?? ??? ??? ??? ???? ????.
border-box: ??? ??? ??? ??? ?? ??? ??? ??? ?????. ?, ??? ??? ??? ???? ??? ??? ?? ??? ?????. ???? ??? ??? ?? ??? ??? ???? ???? ??? ? ????.
inherit: ?? ?? ??? ?? ?? ???? ????? ?????.
??? box-sizing: border-box;? ???? ??? ??(padding)? ???(border)? ??? ??? ?????.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="div1">兩個(gè) div 現(xiàn)在是一樣大小的!</div>
<br>
<div class="div2">php中文網(wǎng)</div>
</body>
</html>CSS3 box-sizing ??? ???? ???.
????? ??? ??? ??? ??? ?? ?????.
??(??) + ??(padding) + ???(border) = ??? ?? ??
??(??) + ?? (?? ??) + ???(border) = ??? ?? ??
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="div1">這個(gè)是個(gè)較小的框 (width 為 300px ，height 為 100px)。</div>
<br>
<div class="div2">這個(gè)是個(gè)較大的框 (width 為 300px ，height 為 100px)。</div>
</body>
</html>
