CSS3の境界線のサイズ
ボックス サイズ屬性
を使用すると、特定の方法で特定の領(lǐng)域に一致する特定の要素を定義できます。
デフォルト値: content-box
JavaScript 構(gòu)文: object.style.boxSizing="border-box"
構(gòu)文
box-sizing: content-box|border-box|inherit;
content-box : 幅と高さは要素のコンテンツ ボックスに個(gè)別に適用されます。要素のパディングと境界線を幅と高さの外側(cè)に描畫します。
border-box: 要素に設(shè)定された幅と高さによって、要素の境界ボックスが決まります。つまり、要素に指定されたパディングと境界線は、設(shè)定された幅と高さの範(fàn)囲內(nèi)で描畫されます。コンテンツの幅と高さは、それぞれ設(shè)定された幅と高さからボーダーとパディングを減算することによって取得されます。
inherit: box-sizing 屬性の値を親要素から継承する必要があることを指定します。
要素に box-sizing: border-box; が設(shè)定されている場合、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;
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 屬性を使用しないでください
デフォルトでは、要素の幅と上限は次のように計(jì)算されます:
width (幅) + padding (パディング) + border (ボーダー) = 要素の実際の幅
height (高さ) + パディング(內(nèi)側(cè)のマージン) + 境界線 (境界線) = 要素の実際の高さ
<!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>
