第IV章CSSレイアウト
A、CSSレイアウト移行コース
第二に、一般的なレイアウト方法
2.1、テーブルレイアウト
テーブルを達成するために、テーブルを使用して2.1.1、レイアウト
2.1.2、別の実施形態のレイアウト
2.2レイアウトプロパティ
- 幅、のみコンテンツエリアコンテンツの高さの設定は、青色のもの、発効します。
- パディング手段その境界線と国境コンテンツ領域との間の距離。
- マージンは、要素と要素の間の距離を指します。
注意事項：インライン要素は、無駄の幅と高さを指定し、幅と高さを指定することはできません。
デフォルトのレイアウトは、静的な要素に応じた、静的レイアウト、又はプレス文書フローレイアウトとして理解することができます。
相対オフセットは、オリジナルのフットプリントには影響しないオフセット要素自体に相対的です。
手段は、可視領域の配向に対して固定されます。
これは、最も近い絶対的または相対的な位置決めに関して絶対的です。
階層表示は、zインデックスによって決定されてもよいです。相対的な、固定された、絶対的な要素が提供されてもよいz屈折率として定義されます。
2.3、フレキシボックスレイアウト
直接描画幅、作品の幅が固定されているのdiv PX設定するには：30pxの;
2.4、フロートレイアウト
以下に示し、p1は左浮遊効果、P2の上に浮いのように見える、P2が、テキストは、スタートの右側にプッシュされ、この属性は、もともとグラフィックシャッフルのために使用されていますA。
2.4.1、自分自身への影響
図において、要素のインライン要素が及ぶ、幅と高さは、理論的に設けられていないが、それはここで、幅と高さを提供してもよいです。フロートは、自動的にインライン要素ブロック要素としてフォーマットされているからです。
2.4.2、兄弟の影響
幅が増加した場合、フロートの右側には、次の行のアップにプッシュされます。
幅少しチューニングした場合、ターンは同じラインを押しました。
2.4.3、親要素への影響
図からわかるように、赤、青、ブロックの高さのブロックの高さは、赤枠によって識別されます。その後、緑の部分が赤のブロックのうちフロートがあります。実際には、これはパフォーマンスの崩壊の高さです。
プロパティを、親要素が内部負荷要素に焦点を当ててみましょう：このオーバーフローは、親要素に以下を追加することができます。
2.4.4、フローティング影響を除去
浮上の除去の主な影響は、問題の背景を除去するために使用されます。オーバーフローしないプロパティ場合、擬似要素は、拡張擬似背景要素に添加することができます。
2.4.5、フロートを用いた2列のレイアウト
200pxの、高さ：100％;右側、余白左左：主に左フロートに使用
2.4.6、フロートを用いた3列のレイアウト
上記のように、それが位置合わせされていない青色DIVおよび右フロントを発見したが、以下のdivの中央に掛けました。これは一つの層までのdiv右側部分に移動するかもしれないので、フローティング要素は、反対アップしてみてくださいではなく、周りはなく、中間の浮動要素の一部になります。
2.5、インラインブロックレイアウト
、上の図から見インラインブロックを提供するが、それでも縦に表示することができ、問題の幅は明らかです。
調整後、同じ行に表示されます。しかし、ボイドがありました。インラインブロックは、単語の間にギャップがある、テキストとして想像することができます。
外部のフォントサイズに設定した場合：0;時間ギャップを排除するが、別の問題が存在することテキストの赤と青のブロックが全くありません。これは、私たちが内部素子にフォントサイズを設定する必要があることが必要です。
観察することにより、DIVからギャップとの間に隙間も存在することがわかります。：（PSこれは、それがクリアされていない観察する方法である）
、この処理した後、同様の効果がギャップを解消するために達成することができます。または注釈を介して下の図。
またはギャップの問題に対処するためのフォントの方法を使用することをお勧めします。問題は、幅が固定されている場合は、レイアウトを処理するために、このインラインブロックの方法を使用することができます。
2.6、応答性のデザインとレイアウト
2.6.1、ケース
あなたが別の解像度に合うようにしたい場合は、次の図は、このビューポートを追加する最初のものです。
そして、次のメディアクエリー@mediaに追加されます。幅が640ピクセル未満であれば、ケースには、ここで設定。影の所持の内容の左部分。
2.6.2ケースII
メディアクエリ適応を使用して2.6.2.1、
図の効果は、次の図に示す
携帯端末への切り替えに時間が、ディスプレイは非常に良好ではなかったです。
メディアクエリを追加し、適応を行います。中央に配置され、ディスプレイを備え：ブロック、垂直要素となるよう配置されています。
2.6.2.2、ビューポートアダプタ（変化の比例効果）
動的に計算された値の幅マナー。
アダプターユニットREMを使用して2.6.2.3、
html要素は16pxにし、デフォルトのフォントサイズの属性のデフォルト値を持っている、計算を容易にするために、我々は（10pxのか行います）フォントサイズの値の20ピクセルを設定することができ、設定した後、1rem = 20ピクセル。
アダプターユニットREMを使用して2.6.2.4、
あなたは上の図から見ることができますが、それでも私たちは別の問題は、REMを使用した後に発生するさまざまな表示サイズであり、広い国境持って、この問題を解決するために、我々は、画面サイズに行く必要がありますフォントサイズの更新されたHTMLのサイズ。
オリジナルのスタイルのCSSメディアクエリで上に示したように増やします。それに書かれたメディアクエリを持つ大規模なシステムを配置する必要がありますが、以下の小さな範囲を置くことに留意すべきです。
それはREMが計算されて、精度には、正確なピクセルが存在しないためであるという問題もあります。
2.7、レイアウト主流サイトの使用
2.8、CSSの顔の質問
