ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSで内枠を設定する方法
CSSで内枠を設定する方法
- 青灯夜游オリジナル
- 2021-04-21 13:48:4116798ブラウズ
方法: まず要素の border 属性を使用して境界線を定義し、次に「box-sizing:border-box」ステートメントを使用して内側の境界線を設定します。 box-sizing 属性は、指定された領域内に収まるように特定の要素を特定の方法で定義するために使用されます。値が "border-box" に設定されている場合、内側の境界線を定義できます。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
css 内枠の設定
CSS では、border 属性と box-sizing 属性を併用して内枠を追加できます。
border 属性は境界線を追加するために使用されます。
box-sizing 属性は、特定の方法で特定の要素を定義するために使用されます。指定された領域に; プロパティ値を border-box 値に設定して、内側の境界線を追加します。
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div.container {
width: 30em;
border: 1em solid;
}
div.box1 {
width: 50%;
border: 1em solid red;
float: left;
}
div.box2 {
box-sizing: border-box;
-moz-box-sizing: border-box;
/* Firefox */
width: 50%;
border: 1em solid red;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="box1">普通边框！！</div>
<div class="box2">内边框！！</div>
</div>
</body>
</html>レンダリング:
説明: ボックス サイズ属性
ボックス サイズ設定プロパティを使用すると、特定の方法で特定の領域に一致する特定の要素を定義できます。
たとえば、枠線付きの 2 つのボックスを並べて配置する必要がある場合、box-sizing を "border-box" に設定することでこれを行うことができます。これにより、ブラウザーは指定された幅と高さでボックスをレンダリングし、ボックス内に境界線とパディングを配置します。
プロパティ値:
content-box: CSS2.1で規定されている幅と高さの動作です。要素の幅と高さ (最小/最大プロパティ) を指定すると、ボックスの幅と高さに適用されます。パッドとボーダーのレイアウトと、指定された幅と高さを除く要素の描画
#border-box: 幅と高さ (min/max プロパティ) を指定して、要素のボーダーを決定します。つまり、要素の幅と高さの指定には、パディングとボーダーが含まれます。コンテンツの幅と高さは、それぞれ設定された幅と高さからボーダーとパディングを減算することによって取得されます。
(学習ビデオ共有: css ビデオ チュートリアル)
以上がCSSで内枠を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。