CSS レイアウトの基本の概要_html/css_WEB-ITnose

一般的なレイアウトタイプ

1カラムレイアウト

2カラムレイアウト

3カラムレイアウト

CSSの位置決めメカニズム

シンプルなWebページレイアウトの構造とパフォーマンスの原則

CS S要素非表示

cssフロートをクリアする最良の方法Collectionscollectionscollectionscollections

divcssリファレンステーブルの名前を付けます。 、通常、ヘッダーの幅は固定されており、高さは自動に設定されます

2 列レイアウト

適応型 2 列レイアウト: 幅はパーセンテージ + フロートを使用します

固定幅 2 列レイアウト: 幅: 特定の値/parent要素 幅が決まります、width+percent+float;

floatを追加しないと、横並びの2列レイアウトを実現できません。

3 列レイアウト

従来の 3 列レイアウトは float 実装に依存します

特別な 3 列レイアウト: 左と右は固定、中央は適応的、左と右は絶対位置で実装され、中央はマージン付きで実装されています 3 列レイアウト: 左 側面と右側は固定されており、中央は適応型です:

CSS での位置決めメカニズム

標準ドキュメントフロー

フローティング

絶対位置決め

構造の原則Web ページのシンプルなレイアウトのパフォーマンス

HTML 構造の簡素化を最大限に高め、CSS 設定を使用して HTML と CSS の間の適合性を軽減します

スタイルに意味のないタグを追加すべきではありません

構造とプレゼンテーションは分離されており、構造はシンプルで、レイアウトスタイルを考慮せずに構造が構築されます

CSS 要素は非表示になります

{ display: none; /* 不占据空间，无法点击 */ }{ visibility: hidden; /* 占据空间，无法点击 */ }{ position: absolute; clip:rect(1px 1px 1px 1px); /* 不占据空间，无法点击 */ }{ position: absolute; top: -999em; /* 不占据空间，无法点击 */ }{ position: relative; top: -999em; /* 占据空间，无法点击 */ }{ position: absolute; visibility: hidden; /* 不占据空间，无法点击 */ }{ height: 0; overflow: hidden; /* 不占据空间，无法点击 */ }{ opacity: 0; filter:Alpha(opacity=0); /* 占据空间，可以点击 */ }{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占据空间，可以点击 */ }

CSS メソッドではクリアフロートが最適です

オーバーフローを追加します: 親に隠されます

利点: 構造的および意味論的な問題がなく、コード量も少なくなりますは非常に小さいです

欠点: コンテンツが増加すると、自動行折り返しが発生しやすく、コンテンツが非表示になり、オーバーフローする必要がある要素が表示できなくなります

親要素も float に設定されます (float を追加します) : 左/右)

利点: 構造的および意味論的な問題がなく、コード量が非常に少ない
1. 欠点: 親要素に隣接する要素のレイアウトに影響があり、常にフローティングすることは不可能ボディ、使用はお勧めしません
2. 親要素に display: table を設定します
長所: 構造のセマンティクスは完全に正しく、コードの量は非常に少ないです
3. 短所: ボックス モデルの属性が変更されており、これによって引き起こされる一連の問題は利益に値しないため、

Use:after 疑似要素

の使用は推奨されません。 利点::after は疑似要素であり、疑似クラス (と呼ばれます) ではないことに注意してください。一部の CSS マニュアルでは「擬似オブジェクト」と呼ばれています)。Clear Float Encyclopedia などの多くの記事ではこれを擬似要素と呼んでいますが、csser はより厳密であるべきです。

IE6-7 は :after をサポートしていないため、zoom:1 を使用して hasLayout をトリガーします。

欠点: 互換性はあまり良くありません。

フローティング要素の後に空のラベルを追加する

フロートをクリアする
長所: シンプルで明確

短所: 意味のない空のラベル、セマンティクスに役立たない

DIV+CSS 標準の名前付きコレクション

命名標準の説明

1 )、すべて名前は小文字が最適です

2) 属性の値は二重引用符 ("") で囲む必要があり、class="divcss5"、id="divcss5"

3 のような値を持つ必要があります。 ) 各タグには開始と終了があり、正しいレベルが必要です。また、レイアウトは規則正しく整っていなければなりません

4) 空の要素には終了タグを付けるか、開始タグの後に「/」を追加する必要があります。 ”

5)、パフォーマンスと構造は完全に分離されており、コードにはスタイル、フォント、bgColor、ボーダーなどのパフォーマンス要素は含まれません。6)、定義は以下に従う必要があります。大きなものから小さなものへの原則、文書の構造を反映し、検索エンジンのクエリを容易にします。 ... 10) 一目で理解できるもの以外は、単語を省略しないようにしてくださいDIV+CSS 命名参照テーブル CSS スタイル命名指示 CSS ファイル命名指示メニューメニューforms.cssフォーム サブメニューサブメニューmend.cssパッチsideBarサイドバーprint.cssprintsidebar_ a,#sidebar_bメインタグmsg#messageメッセージヒントヒント投票投票フレンドリンクフレンドリーリンクタイトルタイトル概要概要ログインバーログインバーsearchInput検索入力ボックスホットホットホットスポットsearch検索search_output 検索出力は検索結果と同様ですsearchBar SearchBarsearch_results検索結果copyright 著作権情報ブランド商標ロゴウェブサイトのロゴsiteinfoウェブサイト情報siteinfoLegal法的声明サイト情報クレジット評判ジョイナス参加してくださいパートナーパートナーサービスサービス登録者登録arr/arrowarrowギルドガイドサイトマップサイトマップリストリストホームページホームページサブページセカンドページサブページtool,#toolbarツールバードロップドロップ

wrapper	ページ周辺機器コントロール全体のレイアウト幅		master.css,style.css	Main
container または # content	最外層に使用されるコンテナ		module.css	module
layout	layout		base.css	Basic public
head,#header	ページヘッダーパート		layout.css	レイアウト、レイアウト
foot、#footer	フッター パート		主題.css	テーマ
nav	メインナビゲーション		列。 css	コラム
サブナビ	セカンダリナビゲーション		font.css	テキスト、フォント
左または右のサイドバー
ページ本体
タグ
dorpmenu	下拉菜单
status	状态
scroll	滚动
.tab	标签页
.left.right.center	居左、中、右
.news	新闻
.download	下载
.banner	广告条(顶部广告条)

导入样式及脚本

传统方式

引用线上CDN

57ed277087555b981e44f0251c478f25 这是引用JS文件

579465512932231fc4c6ee81394673c8这是引用CSS文件

引用本地文件

6505a039f42201473d8e45bca746480f 这是引用JS文件

a02baf276e0eeb255bbeac60e1fa1b86这是引用CSS文件

新规范

根据 HTML5 规范，在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性，因为 text/css 和 text/javascript 分别是它们的默认值。

<!-- External CSS --><link rel="stylesheet" href="code-guide.css"><!-- In-document CSS --><style> /* ... */ </style><!-- JavaScript --><script src="code-guide.js"></script>