ホームページ > 記事 > ウェブフロントエンド > CSS3で内枠を追加する方法

CSS3で内枠を追加する方法

王林オリジナル: 2020-11-19 11:52:562558ブラウズ

css3 で内側の境界線を追加する方法: [box-sizing:border-box;] などの border 属性と box-sizing 属性を使用して内側の境界線を追加できます。 box-sizing 属性を使用すると、指定された領域内に収まるように特定のプロパティを定義できます。

CSS3で内枠を追加する方法

このチュートリアルの動作環境: Windows7 システム、CSS3 バージョンこの方法は、すべてのブランドのコンピューターに適しています。

css3 内側の境界線の追加

関連プロパティ:

border プロパティを使用すると、要素の境界線のスタイルと色を指定できます。

ボックスサイズプロパティを使用すると、指定された領域内に収まるように特定の要素を定義できます。

(学習ビデオ共有: css ビデオチュートリアル)

文法:

box-sizing: content-box|border-box|inherit:

属性値:

#content-box CSS2.1で規定されている幅と高さの動作です。要素の幅と高さ (最小/最大プロパティ) を指定すると、ボックスの幅と高さに適用されます。要素のパディングと境界線のレイアウトと描画では、
border-box を除く幅と高さを指定します。幅と高さ (最小/最大属性) を指定して、要素の境界線を決定します。つまり、要素の幅と高さの指定には、パディングとボーダーが含まれます。コンテンツの幅と高さは、それぞれ設定された幅と高さからボーダーとパディングを減算することによって取得されます。
inherit 親要素から継承する必要があるボックスサイズ属性の値を指定します。

コード実装:

<!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>

達成効果：

CSS3で内枠を追加する方法

CSS3で内枠を追加する方法

関連記事