学習内容

z-index

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

.z-one {
	position: absolute;
	width: 200px;
	height: 400px;
	background-color: yellow;
	/*z-index: 10;*/
}


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

z-1、z-2 divを作成し、width、height値を与え、次のように出力します.

z-indexプロパティを指定すると、上記の青(z-2)はなくなりますが、実際には黄色(z-1)の後にあります.同じ大きさで層が重なって見えない.
z-index:z軸に影響するプロパティ
Z軸の位置は自由に調整できます.
z-indexが適用されていない領域の値はゼロです.
属性値は数字のみで、単位は省略します.
10と20より20の方が大きいのでブルーアップ.
したがって、3 Dフィーチャーのある場所でのみ使用できます(固定、絶対、相対).
最初の兄弟が純粋な3 D position(fixed,absoulte)を使用する場合
レイヤオーバーラップ(2 Dオーバーラップなし)
2番目の兄弟の使用位置は重複しません.
大きなセグメントを作成するときに2 Dを使用します.重なることはない.
-->最初の兄弟の位置が2 Dか3 Dかによっては、レイヤが重なったり重なったりしません.

float

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

header	{
	width: 100%;
	height: 100px;
	background-color: gray;
}

.left {
	float: left;

	width: 300px;
	height: 200px;
	background-color: coral;
}

.center {
	float: left;
	width: 300px;
	height: 200px;
	background-color: green;
}

.right {
	position: fixed;
	float: right;
	width: 300px;
	height: 200px;
	background-color: yellowgreen;
}

footer {
	clear: both;

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

スペースを作成するタグ(div、footer、sectionなど)はblockの性質(y軸位置合わせ)を持つ
フロートオーバーラップ位置合わせ、同線配置、3 Dプロパティ
z-indexのように、前の兄弟が3次元であれば、後ろの兄弟が後ろに重なります.

floatとclearはセットです
同じ線上に配置する機能をon-floatに配置
閉じる-消去機能(floatを最後に使用したラベルの次のラベルにclear)

floatを使用する場合、floatプロパティを使用するタグの親のサイズは固定されている必要があります。floatの領域を%に指定した場合、親のサイズを固定する必要はありません(レイヤの歪みを防ぐため)。固定されたwidth内でフローティングアラインメントが行われているので,積層ミスはなかった。floatの値を指定する親は、floatの幅値以上である必要があります。純粋な3 D位置ではfloatは使用できません

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

<footer></footer>

.left-2 {
	float: left;
	width: 100px;
	height: 150px;
	background-color: seagreen;
}

.right-2 {
	float: right;
	width: 100px;
	height: 150px;
	background-color: gray;
}

footer {

	width: 100%;
	height: 100px;
	background-color: black;
}
.clearfix {
	clear: both;
}
section {
	overflow: hidden; 
	width: 800px;
	background-color: orange;
}

htmlコードだけでは、floatとclearがどこで変わったのかを特定するのは難しい.
通常、最後のfloatタグの後にclass=「clearfix」を指定します.
.clearfix {both;}値を入力すると、clearfixだけを見ても推定できます.
divは3次元なので、親は子供の高さを得ることができません.overflow:hidden;サブアイテムの高さの値を使用します.

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

.over-box {
	overflow: hidden;
	overflow-y: scroll;
	overflow-x: scroll;
	width: 200px;
	height: 200px;
	background-color: yellowgreen;
}

overflow: hidden; - テキスト数が選択した領域より大きい場合は、選択した領域でのみテキストを表示します.
overflow-y: scroll; - y軸にスクロールしてテキストを切り取らないようにする場合
overflow-x: scroll; - x軸にスクロールしてテキストを切り取らないようにする場合
overflow+float=親に子の高さ値を認識させることができます.(3次元でも認識できる)

flex-Webサイトのレイアウトを効率的に行うのに役立ちます.
floatの発展形態
~~flexを親領域~~に適用すると、x軸が左側に整列します.

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

</div>

2つの

class、1つのサイズ、1つの異なるcssを適用する場合、この方法を使用することができます↓

.container {
	display: flex;
	/*flex-direction: row; row가 기본,x축정렬, column-y축정렬, row-reverse 역순으로 오른쪽정렬, column-reverse 역순으로 y축 정렬*/
	/*flex-wrap: wrap; */
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: baseline ;

	width: 1000px;
	height: 500px;
	border: solid 10px lightcoral;

}

.item {
	width: 200px;
	
}

.one {
	height:100px ;
	background-color: yellowgreen;
}

.two {
	height: 200px;
	background-color: lightblue;
}

.three {
	/*width: 900px;*/
	height: 300px;
	background-color: orange;
}

flex-wrap: nowrap; - 親領域を離れない場合、内部領域は自動的に親領域に再調整されます.
flex-wrap: wrap; - 子供の合計が親より大きい場合は、自動的に改行されます.
flex-flow: row wrap; - flexとwrapを同時に指定する場合
justify-content: flex-start; - x軸が整列している場合flex-end;右揃え
center; 中央揃え、space-tween;ギャップを作成する場合はspace-androundボックスの外に同じスペースがあります
align-items: flex-start ; - y軸は一番上の位置に揃え、flex-endは一番下、中央、
baseline ; ボックスの下揃え

の間でソートするには、

を選択します.

	<div class="center-1"></div>
	<div class="center-2"></div>

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


}

.center-2 { 
	position: relative;
	width:300px;
	height: 300px ;
	background-color: gray;
	
	left: 50%; /*왼쪽면을 기준으로 50%*/
	margin-left: -150px; /*회색박스의 50%만큼 당기*/


}

margin: 0 auto; - 上下0、左右auto、block要素で使用
.center-2はposition:相対;指定、左:50%;margin-left: -150px; 主語で並べ替え、
-欠点:widthの値が変更された場合、marify-leftの値も変更する必要があります.

難点

今日はpositionに続いて混同した二大山脈を学んだ気分
floatは依然として混同されている.

解決策

開発ログを書いたら、もう一度聞かなければなりません.
今回は集中して動画を見ることにしました

リファレンスサイト
https://flexbox.help/
https://css-tricks.com/centering-in-css/

学習の心得.

バニラの使い方を週末をかけてマスターしました.ローカルから直接アップロード(?)何をするのか分かりませんが、fileを追加して追加すればいいです.今、研修書類を下宿センターに移して保管します.floatは難しすぎますfloatの授業でポジションにも言及し、頭の中が真っ白になった.もう聞きに帰ります