ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSで内側の枠線を設定する方法
CSSで内側の枠線を設定する方法
- 藏色散人オリジナル
- 2021-03-03 10:51:4510277ブラウズ
CSS の内側の境界線を設定する方法: 最初に HTML サンプル ファイルを作成し、次に div を定義し、最後に border 属性と box-sizing 属性を使用して内側の境界線を追加します。
この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、DELL G3 コンピューター。
CSS では、border 属性と box-sizing 属性を併用して内枠を追加できます。 border 属性は境界線を追加するために使用され、box-sizing 属性は指定された領域に適合する特定の方法で特定の要素を定義するために使用されます。内側の境界線を追加するには、box-sizing 属性値を border-box 値に設定します。 。
まずはcssで内枠を設定する例を見てみましょう。
<!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>box-sizing プロパティ
box-sizing プロパティを使用すると、特定の方法で特定の領域に一致する特定の要素を定義できます。
たとえば、枠線付きの 2 つのボックスを並べて配置する必要がある場合、box-sizing を "border-box" に設定することでこれを行うことができます。これにより、ブラウザーは指定された幅と高さでボックスをレンダリングし、ボックス内に境界線とパディングを配置します。
構文
box-sizing: content-box|border-box|inherit;
プロパティ値:
content-box: CSS2.1で規定されている幅と高さの動作です。要素の幅と高さ (最小/最大プロパティ) を指定すると、ボックスの幅と高さに適用されます。指定された幅と高さを除く要素のパディングと境界線のレイアウトと描画
border-box: 幅と高さ (min/max プロパティ) を指定すると、要素の境界線が決まります。つまり、要素の幅と高さの指定には、パディングとボーダーが含まれます。コンテンツの幅と高さは、それぞれ設定された幅と高さからボーダーとパディングを減算することによって取得されます。
inherit: 親要素から継承するボックス サイズ属性の値を指定します。
[推奨学習: css ビデオ チュートリアル ]
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div.container
{
width:30em;
border:1em solid;
}
div.box
{
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="box">这个 div 占据了左边的一半。</div>
<div class="box">这个 div 占据了右边的一半。</div>
</div>
</body>
</html>レンダリング:
以上がCSSで内側の枠線を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。