ホームページ > ウェブフロントエンド > htmlチュートリアル > CSS_html/css_WEB-ITnose の 4 つの中心概念

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

WBOY
リリース: 2016-06-24 11:49:48
オリジナル
1127 人が閲覧しました

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 の応用はこれ以上のものです。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート