CSSで内側の枠線を設定する方法-CSSチュートリアル-php.cn

CSSで内側の枠線を設定する方法

藏色散人

リリース： 2023-01-03 09:27:16

オリジナル

10254 人が閲覧しました

CSS の内側の境界線を設定する方法: 最初に HTML サンプルファイルを作成し、次に div を定義し、最後に border 属性と box-sizing 属性を使用して内側の境界線を追加します。

CSSで内側の枠線を設定する方法

この記事の動作環境: 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で内側の枠線を設定する方法