CSS3の境界線のサイズ
ボックス サイズ属性
を使用すると、特定の方法で特定の領域に一致する特定の要素を定義できます。
デフォルト値: content-box
JavaScript 構文: object.style.boxSizing="border-box"
構文
box-sizing: content-box|border-box|inherit;
content-box : 幅と高さは要素のコンテンツ ボックスに個別に適用されます。要素のパディングと境界線を幅と高さの外側に描画します。
border-box: 要素に設定された幅と高さによって、要素の境界ボックスが決まります。つまり、要素に指定されたパディングと境界線は、設定された幅と高さの範囲内で描画されます。コンテンツの幅と高さは、それぞれ設定された幅と高さからボーダーとパディングを減算することによって取得されます。
inherit: box-sizing 属性の値を親要素から継承する必要があることを指定します。
要素に box-sizing: border-box; が設定されている場合、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">两个 div 现在是一样大小的!</div>
<br>
<div class="div2">php中文网</div>
</body>
</html>CSS3 の box-sizing 属性を使用しないでください
デフォルトでは、要素の幅と上限は次のように計算されます:
width (幅) + padding (パディング) + border (ボーダー) = 要素の実際の幅
height (高さ) + パディング(内側のマージン) + 境界線 (境界線) = 要素の実際の高さ
<!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">这个是个较小的框 (width 为 300px ，height 为 100px)。</div>
<br>
<div class="div2">这个是个较大的框 (width 为 300px ，height 为 100px)。</div>
</body>
</html>
新しいファイル
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
.box_sizing{
width:180px;
padding:40px 20px;
background:#a0b3d6;
overflow:hidden;
}
.box_sizing .in{
width:100%;
border:12px double #34538b;
background:white;
padding:5px;
box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
</style>
</head>
<body>
<div class="box_sizing">
<div class="in">此处12像素的border和5像素的padding值算在宽度里面了~~</div>
</div>
</body>
</html>
プレビュー
Clear
- おすすめコース
- コースウェアのダウンロード
現時点ではコースウェアはダウンロードできません。現在スタッフが整理中です。今後もこのコースにもっと注目してください〜
このコースを視聴した生徒はこちらも学んでいます
