HTMLとCSSの研究ノート(3)

1、フロートフロート

配置された親コンテナに沿って左または右:ドキュメントフローから

ドキュメントフロー
ドキュメントは、ドキュメントストリームが占有されているオブジェクトの位置に配置することができるされています

フロートプロパティは
、右、なし左

フロートの点に注意してください。
要素は、任意の影響を受けずに浮いている前に、唯一の要素のために、要素の背面に影響を与え
、デフォルト持ち上げ半分層の内容は、フォトテキストスタイル実現することができる
デフォルトのコンテンツの幅によって決定
改行配置、フローティングエレメント列が変化するラインフィット
主要素がブロックに追加されるだけでなく、インライン要素に添加してもよいです

浮動を削除する方法?
垂直に配置:左、右、両方:クリア、フロートクリア
ネストされた配列:
固定幅と高さを:ダイ高さに固定されていない、推奨しない、効果が適応に適していない
親も浮き容器であるので、お勧めできません:親浮動要素後ろの要素に影響します
オーバーフロー:子要素がオーバーフローしたかったがある場合は、隠された(BFC仕様)を、それが影響を受けることになりますが、ないオーバーフロー
表示:インラインブロック(BFC仕様)が推奨されていない、親要素が背景にある要素に影響を与えます
セット空のラベル:お勧めできませんが、複数のラベルを追加する
擬似クラスの後:お勧め空のタグ、大手企業の現在の練習の拡張バージョンです。
(クリアプロパティのみ動作ブロックタグ、タグが作業をインラインでない)
書か:.clear ::後{内容: ' 「;クリア:両方が、ディスプレイ:ブロック;}

図2に示すように、位置測位

位置特有の
CSS位置属性は、文書内の標的要素を特定する上、右、下、左属性は、要素の最終的な位置を判断する

位置値:
静的(デフォルト)
相対:(相対位置)
の絶対
固定
スティッキー

相対:(相対位置)
オフセットが配置されていない場合、素子自体には影響がありません:左:100pxにし、トップ:100pxに 、左の正の値が右方向を示している
ドキュメントフロー要素から逸脱することなく、
他の要素に影響を与えないが
、右、上部を残しオフセット電流に対して、底部要素自体

絶対:(絶対位置)
完全にフロートと同様ドキュメントフロー()の要素
インライン要素の幅と高さがサポート
決定の内容に基づいて、ブロック要素のデフォルトの幅(ブロックインライン特性を持たせるための)
祖先が配置されている場合、相対位置決めがオフセットされている祖先要素(例えば、HTMLタグ、オフセット原点と、左上隅に対して)ドキュメント全体に対して配置されていない、祖先シフト
:実施例
300ピクセルによって;ボーダー:;:#1 BOX1 {幅高さ300ピクセルによって1ピクセルをベタ黒;マージン:20ピクセル自動;位置:相対;}
#1 BOX2 {幅100ピクセル、高さ100ピクセル、背景:赤;位置:絶対;トップ:0;左:0;}
要素を位置決めBOX2祖先要素BOX1(絶対、相対、ように、BOX2は、上部原点オフセットBOX1としてコーナーを左)一つの行に固定されています。

固定:(固定配置)
ので、完全にドキュメントフローの要素こと
(したがって、インライン要素がブロック特性を含む)幅高い支持体と内部要素の
(ブロックインラインそう特性含む)ワイドブロック要素がデフォルトのコンテンツの決意に従った
全体のブラウザウィンドウに対して操作、ブラウザのスクロールバーの独立した(などポップ、トップボタン、など)

粘性の粘着性:()配置
の所定の位置に、粘性のための操作
(P高速書き込みモードタグ} P {AAAAAコンテンツ* 6)

z屈折率:(位置決めレベル)
デフォルト値は0層である
:問題のネストされた階層
のみを比較するために、親コンテナがサブ要素のレベルとのレベルでない場合、親コンテナレベルを持つ最初は、比較するためには

3、CSS省略記号
幅が
一定の幅持たなければなりません
ホワイトスペースを:NOWRAP
コンテンツラップを防ぐ;
オーバーフロー:隠された
隠された内容は、こぼれた
テキストオーバーフローを:省略記号
省略記号

図4は、CSSスプライト
特性:
また、エルフとして知られているCSSのCSSスプライトは、負荷に大きな数字を含め、すべての主要なヨーロッパの散発的な写真に関連するページにあなたを可能にするWebアプリケーション、画像処理モード、です。
実際には、すなわち背景位置決め、異なる領域を標的とされているアイコンと背景画像を使用する
利点:
あなたは画質、ページの速い画像読み込み速度を減らすことができ
、Webページのオープンスピードアップするために、絵のリクエストの数を減らすために

5を、CSSフィレット
境界半径:4つの値が書き込み可能で、左上、右上、左下、右下であります

6、レイアウトのPC側?
バナー、心のバージョン

7、HTMLとXHTMLの違い:

DOCTYPEのドキュメントとコーディング
例の要素:HTML:機密ラベルを付けることができ;てXhtml:小文字のみ
属性ブール値:HTML:チェックするには、XHTML:確認 =「確認」
属性の引用符を:XHTML属性値を引用符で囲む必要があります。<divのタイトルを=「こんにちは」> </ divの >
イメージalt属性:XHTML:IMGタグにはalt属性を記述する必要があり
文言単一のラベルを:単一のラベルXHTML最後は/追加する必要があります。<meta />
二重のラベルが閉じ:HTMLデュアルラベルよいか、ないかもしれない書き込みを(非常にお勧めしません)完全な、そうではありませんでしたXHTML

8、強く、B、EM​​、およびI

症状は、テキストと太字や斜体ある
ことを除い:強いとEMは、セマンティック提供(推奨)されている、と私は利用可能と意味ないですbは。
IおよびアプリケーションB:セレクタ以上のクラスの簡略化された操作。

9、参照ラベルの
BLOCKQUOTE:説明の相場大きなセグメント
Q:参照サブパラグラフのフレーズを説明するための
略語や頭字語:abbr要素
アドレス:アドレス情報が参照文書を
引用:参考書のタイトルを

セマンティックラベルの利点:;簡単に多人数の共同開発のためのコード化された規制の仕様範囲をコンピュータまたはブラウザの賛成で簡単に解決するには、それが簡単に検索エンジンが所望のコンテンツを検索できるようにするため。実際には、代わりに(インラインのdivに相当)のdivとスパンを使用していますが、右のコンテキストで適切なタグを使用すると、より従順であることができ

10、iframeのネストされたページラベル(多くの場合、フィッシングサイト)
のiframe。作成し、追加の要素を含みますドキュメントのインラインフレーム(フレーム内すなわち、行)。
それは次のとおりです。他には、現在のHTML表示HTMLに導入することができます

主にはiframeを調整パターンの属性を使用して
データ転送、共有コード、パーシャルリフレッシュ、およびその他の第三者の介入:シナリオ

11、BRとWBR?

BR:単一のラベル、包装は、WBRソフトラップである:長い単語に加えそこ意志ラップ全体ではなく、ワードラインフィードの部分:のHttp <WBR> HTMLの<WBR> XhtmlCss HTMLとのHttp順次ラップ、長い単語は、使い捨てのラップではありません

12、プリコードと

表示ウェブページのプログラムコード(コード・テキストのような自動生成されたラベルのスパンで囲まれた)
高度に出力角括弧は、エスケープ&LT;(<);&GT;(>)
の事前定義可能なフォーマット済みテキストタグ。プレ要素はテキスト一般リザーブ空間と改行の中に封入された
コードタグ:取り囲むコードテキスト
外層としてpre要素は、内側要素は、コード表示コードとして実装されてもよいです。

、最終的な実装コードが示すこれらの2つのラベル、一般的に代わりに自動的に生成するには、マークダウン構文を使用しての直接書き込みをしないでください*メジャーであることの意味を理解します

13、エリアをマップ?
特別なリンクのグラフィック画像を追加するには、ホットゾーン領域の形状が追加さ:矩形、円形、多角形、
矩形:書き込みのみの左上と右下の角の座標に
円:中心座標および半径
ポリゴン:書き込み多点座標

14、埋め込みオブジェクト?(以下では)
そのようなフラッシュアニメーション、プラグインなどのいくつかのメディアを挿入し発現させました。基本的にあまり違い、主に異なるブラウザのとの互換性のために
オブジェクトparam要素の要素のニーズ完了と協働します

15、オーディオとビデオの
H5に属する新機能の
オーディオタグは、ビデオラベルが埋め込まれたビデオファイルを示して、埋め込まれたオーディオファイルを表します。デフォルトのコントロールは、コントロールがコントロールのプロパティで表示することができ、表示されません。

ラベルのソースとの互換性を改善するために、

16、テキスト注釈?

ルビーは、RTような組成
CSS実装反対向きのテキスト、テキストBDOタグが逆の順序を達成します。

17、拡張リンクタグ
、外部ファイルの導入に大きな役割
URLの前にタイトルバーの小さなアイコンを追加するには
、<リンクのrel =「アイコン」タイプ =「/画像/ X-アイコン」のhref =「http://www.mobi/favicon.ico ">
事前に解決するDNSに導入された
DNSプリフェッチ<リンクのrel =" "のhref =" // res.mmstat.com「/>

18、メタ学習を拡張しましたか?
最適化のウェブサイトは
、いくつかの補足情報を追加META:
あなたはまた、いくつかの機能を追加することができます:レンダリングモード、リフレッシュ、キャッシュ
CTRL + F検索テキスト

*注:大規模なウェブサイトのメタの蓄積と書かれているものすべてが、それはパワーインタビューに役立つかもしれないリンク

19、HTML5の新しいセマンティックタグは
、一般的にのみページいったん発生
ヘッダー:ヘッダー
フッター:フッター
メイン:メイン
のhgroup:タイトル組み合わせ
NAV:ナビゲーション

記事:独立したコンテンツ(独立性に焦点を当てた)
余談:補助情報の内容
セクションを:地域(分割領域を中心に)
図:画像やビデオの説明
figcaptionを:説明タイトル画像やビデオのセクション

注:あなたが行うにはdiv要素を使用できますが、しかし、セマンティックタグ上の利点は、すでに議論されてきました

データリスト:オプションリストの
詳細/要約:文書の詳細/ドキュメントのタイトル
進行/メートル:の定義プログレスバー/メトリック測定範囲
時間:日付または時刻の定義を
マーク:マーク付きテキスト
(ホバーメッセージが表示さにtitle属性)
(にお勧めします対応する意味ラベルにDIV)

20、テーブル拡張が
崩壊:ボーダー崩壊:シングレットを追加
隠す空のセル:空のセル:隠す
/ボーダー回転:スラッシュ分類を
グループ化列を:COLGROUP / COL

21、拡張形式

美化フォームコントロール:1、擬似クラス、主にラベルタグとは:2チェック、位置+不透明度
ラベルは、選択された領域のチェックボックスを増加させるべきです

新しい入力コントロール:
電子メール:メールアドレスボックスの入力し
たURLを:URL入力ボックスの
数:数値入力ボックスの
範囲:スライダー
日/月/週:日付コントロール
検索:検索ボックスの
色:カラーコントロール
TEL:電話番号入力ボックス(中モバイル端末)は、テンキーを起動するデフォルトになります
時間:時間制御

の新しいフォームのプロパティ:
オートコンプリートは:自動的にデフォルト:ON \ OFFを
オートフォーカス:フォーカスを得る
必要が:空にすることはできません
パターン:定期的な検証、検証を介して実行し続け

方法:データ送信
ENCTYPE:データ転送タイプの
名前/値:鍵データ

拡張タグ
フィールドセット:フォーム要素内にグループ化された
タイトルを定義するためのフィールドセット要素:凡例
OPTGROUPを:カスタマイズオプショングループを

22、BFCの仕様

文脈(コンテキストフォーマット)フォーマットは、ページのレンダリング領域で概念的W3CのCSS2.1仕様、およびその子要素を配置する方法を決定するルールをレンダリングするのセット、および関係、ならびに他の要素と対話

BFCすなわちブロックフォーマットコンテキスト(コンテキストブロックレベルフォーマット)は、それがコンテナ要素が外側にレイアウトに影響を与えない内部、別々の容器に単離されたと見なすことができる特性を有する前述の明細書のBFC要素のいずれかに属します一般的なコンテナではないいくつかの機能を有する素子、およびBFC。

トリガ要素BFC仕様は、の位置のいくつかに対処するために、別個の容器、外部影響しないように被験者を形成してもよい
BFCは、トリガ
のnone以外の浮動小数点値:浮遊
絶対配置の要素:(固定絶対)位置
表示を実行すると、インラインブロックであります表細胞、フレックス
可視値に加えて、オーバーフロー(隠された、自動車、スクロール)

BFCの性質とその応用
の重ね合わせマージンの問題解決に
解決マージン配送問題を
浮きの問題を解決するためには、
カバレッジの問題を解決します

 

おすすめ

転載: www.cnblogs.com/AhuntSun-blog/p/11982510.html