フロントエンド(F) - CSSフローティングとの位置決め

1.フロートフロート

  • 定義:要素は属性であり、属性セット要素が浮く制御規格文書の流れをオフ親要素へ移動が位置を指定した 1行のいずれかのカセットがレイアウトでフロートするように配置させる、方法。
  • 標準ドキュメントフロー:文書フローは、要素レイアウト処理レイアウトをいう要素が自動的に上部から底部流配置に、左から右にされていますそして最後に一番下の行へ戻ると、各列の左から右への元素の放電からフォームを分割。その結果、ブランクは、凹凸の高さ、位置合わせ、ボトムラップを折り畳み、上のようにしています。
  • フォーマット:セレクタ{フロート:プロパティ値;}
    プロパティ値:left--左浮動要素;右-右浮動要素; none--要素が浮いていない(デフォルト)
  • 特性:①標準的なフローからは、位置を考慮していないだけフローティングについて、②フローティングが外側に親ボックスを追加する、概念ブロックレベル含むを作成し、整列、③1つのフローティング要素が一番上にそれと整列している場合、場合標準的なフロー要素は、垂直に配置されています。
  • ブロックレベル要素:H1〜H6 P DIV ...リストとして別々の行
    インライン要素:別の行が強いIMGにまたがっていないよう...
    インライン要素がない逆に、ブロックレベル要素に含まれていてもよいです
  • 表示:ブロック要素をブロックとして示した表示素子/インラインブロック要素のブロック/インライン行として示されたが、インラインであってもよい、行/なし要素に表示されていません
  • プレゼンテーションの例
    ここに画像を挿入説明
    ここに画像を挿入説明

2.親国境問題の崩壊

  • クリア:透明フロート
    クリア:右、右フローティング要素が許可
    クリア:左、左フローティング要素が許可
    クリア:両方;両方フローティング要素が許可されていない
    クリア:なし; NOフローティング要素

溶液:
(1)親要素の高さを増加させることは、
ここに画像を挿入説明
(2)は、空のdivタグを高めるために、透明なフロート
ここに画像を挿入説明
(3)親要素のオーバーフローの増加:隠された;
ここに画像を挿入説明
(4)親が擬似クラスを追加します後
ここに画像を挿入説明

  • 概要
    (1)親要素の高さを設定:一定の高さで、シンプルな要素を想定し、制限され、
    バック空DIV(2)浮動要素の増加;コード領域を避けるために簡単に、
    (3)オーバーフロー:シンプルプルダウンいくつかのシナリオを使用しない;
    (4)親クラス擬似クラスを追加するために:後推奨):もう少し複雑を書いてませんが、副作用。

3.相対位置

  • 共通の位置プロパティ値:static--自動位置決め(デフォルト); relative--相対的な位置決め、absolute--絶対位置; fixed--固定位置
  • 位置:相対 ;
  • オフセット性:トップ -トップオフセット; -下のオフセット; -オフセット左; -右のオフセット
  • 元の位置に対して、オフセットを指定し、相対的な位置を、それが任意の標準的なドキュメントストリームに、しかしである元の位置に保持されます
  • サンプルコード
    ここに画像を挿入説明
  • 業績
    ここに画像を挿入説明

4.絶対位置

  • 位置:絶対
  • 場所:ベースXXX位置決め、垂直方向と水平方向(上、下、左、右)
    (1)に配置ない親要素前提の下で、に関してブラウザ ;
    (2)仮定親要素が配置存在し、我々は、通常、尊重します親要素は、オフセット ;
    (3)親要素の範囲内で移動します
    親またはブラウザへの相対オフセット、絶対位置を指定し、それは、文書の標準的なフローでは、ない元の位置に保持されません
  • サンプルコード
    ここに画像を挿入説明
  • 業績
    ここに画像を挿入説明

固定位置

  • 位置:固定
  • 要素の位置ブラウザウィンドウに対しては固定された位置であります
    ここに画像を挿入説明

6. Zインデックス

ここに画像を挿入説明

  • 要素の配置にかかわらず、フローの文書の彼らがそうすることを、ページ上の他の要素を覆うことができ
    、Z-index属性を特定する(前に置かれ、又は後ろにされなければならない要素)要素の積層順序
    z屈折率を-------- --------要素の順序を積み重ねて配置値:数/オート
    Z-インデックス:デフォルトは最高の無制限、0であります

  • 不透明透明度の属性値0.0から1.0まで値が小さいので、その要素はより透明それは全体の要素のために、一連の透明度、背景色と、テキストの色は、透明性を有します。

  • サンプルコード
    ここに画像を挿入説明

  • 業績
    ここに画像を挿入説明

公開された62元の記事 ウォンの賞賛2 ビュー2744

おすすめ

転載: blog.csdn.net/nzzynl95_/article/details/103807011