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

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSで内枠を設定する方法

青灯夜游

Apr 21, 2021 pm 01:48 PM

css内側の境界線

方法: まず要素の border 属性を使用して境界線を定義し、次に「box-sizing:border-box」ステートメントを使用して内側の境界線を設定します。 box-sizing 属性は、指定された領域内に収まるように特定の要素を特定の方法で定義するために使用されます。値が "border-box" に設定されている場合、内側の境界線を定義できます。

CSSで内枠を設定する方法

このチュートリアルの動作環境: 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>

レンダリング:

CSSで内枠を設定する方法

説明: ボックスサイズ属性

ボックスサイズ設定プロパティを使用すると、特定の方法で特定の領域に一致する特定の要素を定義できます。

たとえば、枠線付きの 2 つのボックスを並べて配置する必要がある場合、box-sizing を "border-box" に設定することでこれを行うことができます。これにより、ブラウザーは指定された幅と高さでボックスをレンダリングし、ボックス内に境界線とパディングを配置します。

プロパティ値:

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

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

以上がCSSで内枠を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。