1.学習内容

z-index

Z軸に影響するプロパティ

z-oneでpositionプロパティ値の絶対値を指定すると、黄色の空間は青の空間の後ろに配置されます。

兄弟関係でabsolute,fixed(三次元性格)を使うと,層が重なる現象が現れる.この場合、zインデックスで自由に調整できます。

z軸の属性値は、数値値-単位を省略し、zインデックスが適用されていない領域は初期値0、より高い数値を持つ領域は上向きです.
z-indexは、z軸(3次元)すなわち3次元領域を必要とし、これらの3次元特性を有する位置属性値(fix、rel、ab)にのみ適用される.静的にz軸がなく、できません

<div class="z-one"></div>
<div class="z-two"></div>

.z-one {
	position: absolute;
	width: 200px;
	height: 300px;
	background-color: yellow;
	z-index: 10;
}
.z-two {
	position: absolute;
	width: 200px;
	height: 200px;
	background-color: blue;
	z-index: 20;
}

兄弟関係位置属性値による結果

最初の兄弟の場合、純粋な3 D位置属性値(fixed,absolute)-レイヤオーバーラップ

最初の兄弟は2 D位置属性値を与え、次の兄弟に3 D位置属性値を適用します-レイヤオーバーラップなし

最初の兄弟の位置が2 Dか3 Dかは、レイヤが重なるかどうかによって異なります.
大きな空間を作成する場合は、主に2 D(静的、相対的)を使用し、大きな空間内の小さな領域では2 Dまたは3 Dを使用します.これは、大きな空間の両側が3次元であれば、層が重なる現象が発生するためです.
前の授業で勉強していた親子の間には48人、もっと完璧にしたいなら兄弟の間には16人=完璧

float

display inlie-blockではなく、私が選択した領域をx軸に並べて配置し、ブラウザに対して特定のオブジェクトを左端、右端に配置するときに使用するcssプロパティを使用します。

スペースの作成時に使用するすべてのタグ(header、main、section、footer、divなど)はblock要素です
2 D block要素y軸を揃え、floatを使用して左と右に配置します.この2つの要素はx軸(左端、右端)にあり、ブラウザの長さまたは行の「常に」を左端と右端に配置します.
例外の場合、leftcenterrightを同じ線上に配置すると、レイヤが重なります.(floatを浮動小数点と見なす場合、理解は速い=3 Dフィーチャーの一部を持つ)

<header></header>
	<div class="left"></div>
	<div class="center"></div>
	<div class="right"></div>
<footer></footer>

header {
	width: 100%;
	height: 100px;
	background-color: yellow;
}
.left {
	float: left;
	width: 300px;
	height: 200px;
	background-color: pink;
}
.center {
	float : left;
	width: 500px;
	height: 200px;
	background-color: blue;
}
.right {
	float: right;
	width: 300px;
	height: 200px;
	background-color: green;
}
footer {
	width: 100%;
	height: 100px;
	background-color: black;
}

floatを使用するときに常に覚えておきたいのはclearです

floatは同じ線上に箱を置くために使用され、clearはこれらの機能のプロパティを閉じるために使用されます。

使用方法:clearを使用する場合は、floatを最後に使用したタグ(たとえば、右側の領域)の後に表示されるタグに配置します.both(左右両方とも閉じる機能)

.right {
	float: right;
    ...
}
footer {
	clear : both;
	width: 100%;
	height: 100px;
	background-color: black;
}

float使用時の注意点

ブラウザ幅を小さくすると、青と緑(例)に遭遇するとレイヤが歪むので、非常に効率的に使用する必要があります.

フローティングヒントの使用

1.div親=body(ブラウザ全体);floatを使用する場合、使用する領域の親のサイズは変更できません.(レイヤの歪みを防ぐために、常に固定スペースで使用する必要があります)
注意:1:sectionでラップしてサイズを指定します(sectionの固定値は3つの領域のwidth値以上でなければなりません).
警告2:子(フローティング領域を使用)のheight値が親xに影響します.

2.固定値ではなく可変値（たとえば20%）に設定することで、親領域のサイズを固定する必要がなくなります（頻繁に使用）

<header></header>
<section>
	<div class="left"></div>
	<div class="center"></div>
	<div class="right"></div>
</section>
<footer></footer>

 section {
 	width: 1400px;
 	height: 200px;
 	background-color: orange;  
 }

3.floatを使用する場合は、静的または相対的でなければなりません。純粋な3 D位置属性値(fix,ab)はfloatと一緒に使用できません。

関係を右側の部分(結果は同じ)、absに適用します.fixの適用(フローティング操作X)
floatも3次元の特徴を持ち,2つは純粋な3次元position属性値であるため,3つの円の間で出会い,その機能は相殺される<<と考えられる.

.right {
	position: absolute;
	float: right;
	width: 300px;
	height: 200px;
	background-color: green;

ビジネス・ヒント

clear:float問題を解決するために両者を使用します.ただし、使用時にHTMLコードのみを表示する場合、どの部分がfloatを使用しているのか、どの部分がclearを使用しているのかを明確に特定することはできません.html構造を迅速に理解するために開発者が一般的に使用しているクラス名(clearfix)
そのクラスを基準にクラス内部clear:duthでこのように使用すると,開発者はfloatが以前に使用されていたと推定し,閉鎖されている(よく使用されている)

<div class="right-2"></div>
<div class="clearfix"></div>

.right-2 {
	float: right;
	width: 100px;
	height: 150px;
	background-color: blue;
.clearfix {
	clear: both;
}

ビジネス・ヒント2

親にはfloatを使用する領域が含まれ、親には一定の幅値があります.
どうして親の背景色がないの?子は3 Dで、親の高さには影響しません
親領域でオーバーフローhidden(子をfloatとする)を使用する場合-オレンジ色(子の高さに影響を与える)を表示します.

overflowとfloatを組み合わせて使用すると、親が子の高さ値を認識できるようになります

section {
	overflow: hidden;
	width: 800px;
	background-color: orange;
}

overflow

画面上のすべてのオブジェクトを非表示にする場合は、ボックス領域を超えるまで使用できます。

hiddenを適用すると、箱から離れたすべてのオブジェクトが非表示になります。

領域に何があるか知りたい場合は、overflow-y volw(x度)ではなくoverflow hiddenを使用します.

<div class="over-box">
	<p>Nice to meet Nice to meet ...</p>
</div>

.over-box {
	overflow: hidden;
   	<!-- overflow-y: scroll; -->
	width: 200px;
	height: 200px; 
	background-color: yellow;
}

flex

プロパティ(フローティングコンセプト)は、Webサイトのレイアウトを効率的に行うのに役立ちます。

floatに比べて、Webサイトを簡単に展開し、floatの制限を減らすことができます。

3つのアイテムでソートする場合、flexはアイテムの親コンテナにflexを注入します.

<div class="container">
	<div class="item one"></div>
	<div class="item two"></div>
	<div class="item three"></div>
</div>

.container {
	display: flex;
	width: 1000px;
	border: solid 10px red;
}
.item {
	width: 200px;
	height: 300px;
}
.one {
	height: 100px;
	background-color: yellow;
}
.two {
	height: 200px;
	background-color: blue;
}
.three{
	width: 900px;
	height: 300px;
	background-color: orange;
}

既定では左揃え
方向を変更する場合はflex directionを使用します
row(デフォルト)-x軸整列、column-y軸整列、row-reverse(逆x軸)

.container {
	display: flex;
	flex-direction: row;

flexwrap:nowrapがデフォルトです。nowrapを使用すると、親領域から離れないようにボックスが自動的に親領域に調整されます。

onetwo-three width和は1300になり、すなわち容器width値より大きい.この場合、既存の値は減少します.
wrapに変更すると自動的に改行されます(フローティングと同様)

.container {
	flex-wrap: wrap;
 }

flex-flow: row wrap

方向と改行を同時に指定します.

Flexソート

justicfy-contentプロパティを使用してx軸を整列
flex-startデフォルト(左揃え)、flex-end右揃え、中央揃え、スペース-3つの領域間の平均間隔、ボックス外揃え
space between

space around

y軸整列の処理にalign-itemsプロパティを使用する

flex-startデフォルト(一番上の位置)、flex-end一番下の位置、中央の位置、baslineボックス間のベースライン位置

.container {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: flex-end;
}

center

basline

https://flexbox.help/-flexリファレンスサイト

x軸中央揃え

ビジネスで最も多く使用されている

1.margin 0 autoの前の数字は上下(0 px)の後ろに左右(自動整列)-主にblock要素に用いられる

.center-1 {
	width: 300px;
	height: 300px;
	background-color: yellow;
	margin: 0 auto;

2.相対位置と結合方式

左50%-左50%(スペースの左中央)/左(青のボックスの半分)など

この方法の欠点は,空間サイズが変化すると残存利益を変更する必要がある(欠点は2回修正する必要がある)ことである.

.center-2 {
	position: relative;
	width: 300px;
	height: 300px;
	background-color: blue;
	left: 50%;
	margin-left: -150px;
}

より多くの中央ソート方法がありますが、他の属性を勉強していないので、後で勉強します.

コメントサイトhttps://css-tricks.com/centering-css-complete-guide/

2.学習内容の難点

思ったよりレイアウトが多いので、どのような方式を採用するのか悩んでしまいます.実際の作業では,コードを少なく書く傾向があり,大量の学習が必要である.

3.解決方法

たゆまぬ復習と教えてくれたサイトを通じて、早めに勉強しなければなりません.

4.勉強の心得

レイアウトのコンセプトがやっと終わりました.明日からレイアウト実習が始まるので、とても楽しみです.