CSSレイアウト

1. z-index

z軸の影響属性

兄弟関係で3次元的なposition属性値(absolute,fixed)を使用すると、レイヤーが重なる現象が発生します.

両方の位置を前にする場合は、z-indexを使用します.属性値は数値のみを使用します.

z-indexのデフォルト値は0です.値が高いほど、前に進みます.
※注意点:z軸の3 Dフィーチャーがあるposition属性値でのみ使用できます.(fixed, relative, absolute)

■兄弟関係の位置属性値によって、結果はどう違う?
最初の兄弟の位置が2 Dか3 Dかによって、レイヤが重なるか重ならないかが決まります.
※大エリアでは2次元、小エリアでは2次元または3次元が推奨されます-大エリアでは3次元に設定すると重複するため

コード#コード#

Git Linkz-index

2.floatとclear

●float:同じ線上に箱を置きたい機能を開くときに使う属性

display:選択領域をx軸に並べて行ブロックを使用しない場合

ブラウザの左端または右端に特定のオブジェクトを配置する場合

●clear:float機能をオフにしたいときに使う属性

スペースを作成するときに使用されるすべてのタグ(ヘッダ、プライマリ、セクション、フッター、div)は、block要素の性質を有します.
このため改行現象が発生し、y軸

に整列する

floatプロパティは、選択した領域をいくつかの3 Dフィーチャーでオフセットし、他のマーカーとオーバーラップさせます.

clear: both; float:leftとfloat:rightです.2つの機能の属性値

をオフにします.
※floatを使用するとブラウザが小さくなるとレイヤーが歪む場合があります
※注意点1-floatを使用する場合、floatを使用するエリアの親の大きさは可変値にできません
親の幅は、すべてのフローティング幅の固定値よりも大きくするか、レイヤの歪みを防ぐために同じスペースでフローティングを使用する必要があります.
(親width属性値>=すべてのfloat width属性値)
float領域のすべてのサイズ属性値が可変(%)の場合、親のサイズを個別に指定する必要はありません(ただし、この場合はまれです).
※注意点2–floatの領域を使用し、その高さ値は親に影響しません.
※注意点3–floatを使用する場合、位置は静的または相対的である必要があります.純粋な3 Dfixed、absoluteはfloatと一緒に使用できません.
■実際の操作ヒント:floatを使用すると、clearプロパティがいつclearを使用するかを決定するために、個別のタグ(div class=「clearfix」)を作成できます.
Git Linkfloat_clear

3. overflow

●指定された領域よりもオブジェクトが多い場合に使用する属性
① overflow: hidden; - 範囲外のすべてのオブジェクトを非表示
② overflow-x: scroll; およびoverflow-y:スクロール;-スクロールして非表示の範囲を表示できます
■実務tip 2:flowとfloatを組み合わせて使用すると、サブアイテムの高さ値が親に影響を与える.
Git Linkoverflow

4. flex

float概念の発展は、floatの制限よりも小さい.

display: flex;

flex領域で指定された親の子はデフォルトでx軸で、左揃え

●flex-direction:row(デフォルト)、column、row-reverse、column-reverseを使用して、子供の順序または位置を変更できます.
●flex-wrap:nowrap(デフォルト)親の領域から離れず、自動的に中身の箱を親の領域に合わせてサイズを再調整します.
flex-wrap:子供のサイズがwrapの親領域より大きい場合、改行現象が自動的に作成されます.
●flex-flow:directionとwrapを併用するコマンド
■flexでソート
1)x軸の位置合わせ方法(prevident-content:)
①flex-start-x軸で左揃え

②flex-end-x軸で右揃え

③中心-x軸の中央揃え

④space-tween–x軸に領域ごとに均一な隙間を作成する

⑤space-andround-boxの外部は同じ空間を作り、外部領域と内部領域の隙間の大きさが異なる

2)y軸の位置合わせ方法(align-items:)
①flex-strat–y軸で位置合わせ

②flex-end-y軸で下揃え

③センター－y軸の中央揃え

④ベースライン-複数の項目の間を一番下の線で並べる

※ flexbox.helpサイトでソートを表示できます.
Git Linkflex

5.一元的にソートする方法

①cssで

.sample { margin: 0 auto; }

0の位置は上下を表し、autoの位置は左右を表す.

autoは左右の空白の属性値を自動的に調整できる

②cssで

.sample { 
	position: relative
  
	width: 300px;
	height: 300px;
	left:50%
	margin-left: -150px;
}

margine-leftはwidth値の半分に負の値を加算します.

※デメリットはwidth値を変更する場合、marging-left値を変更する必要があることです.
Git Linkcenter_array

難点

この授業の内容は特に難解なところがないので、大きな問題はありません.

解決策

理解できないところについては、講座を繰り返し聞いたり、ネットで他の人の説明を参考にして問題を解決したりします.

学習の心得.

Position部門の延長線という感じで理解に時間がかかりましたfloatとflexを使用してレイアウトをソートし、よりクリーンなWebページを作成できます.