CSS_html/css_WEB-ITnose の 4 つの中心概念-htmlチュートリアル-php.cn

CSS_html/css_WEB-ITnose の 4 つの中心概念

WBOY

リリース： 2016-06-24 11:49:48

オリジナル

1097 人が閲覧しました

CSS (Cascading Style Sheet) は、カスケードスタイルシートとも呼ばれ、Web ページのスタイルデザインに使用される一連の書式設定ルールです。 CSS スタイルを使用してページを書式設定すると、ページのコンテンツとそのプレゼンテーションを分離できます。ページのコンテンツは HTML ドキュメントに保存されますが、プレゼンテーションの定義に使用される CSS ルールは別のファイルまたは HTML ドキュメントの特定の部分 (通常はファイルヘッダー) に保存されます。コンテンツをプレゼンテーションから分離すると、サイトの外観を維持しやすくなるだけでなく、HTML ドキュメントコードがより簡潔になり、ブラウザの読み込み時間が短縮されます。
CSS には 4 つの中心的な概念があります: 標準フロー、ボックスモデル、位置、およびフロート。これらは CSS の基礎であり、最も一般的に使用される属性です。
1. 標準フロー
標準フローは、ページに表示される順序とコード内の順序が一致していれば、標準フローに準拠しています。例:

	<div>red</div>	<p>blue</blue>

ログイン後にコピー

コードでは、赤が前、青が後ろになります。ページに表示されると、1 行目は「赤」、2 行目は「青」になります。これは、赤が前で青であることを意味します。が後ろにあるので標準的な流れに準じます。上記のタグにフローティング属性や位置決め属性を追加すると、

<div style="float:right">red</div>	<p>blue</p>

ログイン後にコピー

2 のボックスモデル
などの標準的なフローから逸脱する可能性があります。Web ページ上のすべてのオブジェクトはボックスとみなされ、デザイナーはそのプロパティを制御できます。定義を作成してボックスを作成します。これらのオブジェクトには、段落、リスト、タイトル、画像、レイヤー

が含まれます。このボックスがボックスモデル (ボックスモデル) です

ボックスモデルは、内側から外側に向かって主に 4 つの部分で構成されます。 content コンテンツ、パディング、ボーダー、マージン一般的に、ページ上のボックス全体の幅の計算は次のようになります:

合計幅 = 左ボーダー + 左ボーダー + 左パディング + 右パディング + 右ボーダー + 右ボーダー
ただし異なります。ブラウザによって幅の解釈が異なるため、期待される効果を発揮するには、実際の測定と互換性の作業を行う必要があります。

	.example{		width:300px;		//设置盒子宽度		padding:10px;		//设置填充		border:5px solid #000;	//设置边框		margin:20px;		//设置边界	}

ログイン後にコピー

3. 配置
この属性は、要素の配置方法を決定します

各 Web ページは、積み重ねられたページのレイヤーとして見ることができます

4. float 要素には 4 つの値があります: left、none、継承名前を見ただけでわかりますが、float の応用はこれ以上のものです。