7月2日Verlog

学習の内容

CSSレイアウト

1. Box Model

[html]

	<div class="box-model">
		Hello World
	</div>

[css]

html, body {

	margin: 0;
	padding: 0;
}

.box-model {
	box-sizing: border-box;

	width: 200px;
	height: 200px;
	background-color: yellow;
	border: solid 10px red;
/*
	margin-left: 100px;
	margin-top: 100px;
	padding-left: 100px;
	padding-top: 100px;
*/  
	margin: 100px 0 0 100px;  
	padding : 100px 0 0 100px;
	
}

箱モデル:Webサイトの作成時に各レイアウトの構造を理解するためのオプションです.

ボックスモデルのコンポーネント:margin、padding、border、content

content:タグ間の内容を開くと閉じる

margine-left:選択したタグの左側のスペース

padding-left:選択したタグの内容の左側のスペース
※選択されたエリアはアクティブではありません
※paddingではエリアの大きさが変わります.
: (width : 200 -> 300, height: 200 -> 300)

タイプ:margin(padding)-left/top/right/bottom

1行合成順序:top->右->bottom->左(時計回り)

htmlタグとbodyタグの間にはデフォルトでマージンとpaddingがあります.
->html, body { margin: 0; padding: 0; }->デバッガを入れる必要があります.

box-sizing: border-box;:width/hight固定マージン、padding適用

ctrl+/:コメント

2.結合エッジ現象

(1)兄弟ラベル

[html]

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

[css]

.margin-one {
	width: 100%;
	height: 100px;
	background-color: yellow;

	margin-bottom: 100px;
}

.margin-two {
	width: 100%;
	height: 100px;
	background-color: blue;

	margin-top: 50px;
}

marging-bottom、marging-topなど同じ空間を共有する兄弟ラベルのmarginでは、大きな数字が優先的に空間を占有する.(100 + 50 -> 100)

(2)親ラベル

[html]

	<div class="margin-parent">
		<div class="margin-child"></div>
	</div>

[css]

.margin-parent {
	width: 300px;
	height: 300px;
	background-color: yellow;
}

.margin-child {
	position: absolute;

	width: 150px;
	height: 150px;
	background-color: blue;

	margin-top: 100px;
}

marging-top親タグ領域を子タグ

に移動

position: absolute;:入力時にサブタブのみ移動

3. Display

[html]

	<h1>Block</h1>
	<h1>Block</h1>
	<h1>Block</h1>

	<h2>Block</h2>
	<h2>Block</h2>
	<h2>Block</h2>

	<span>Inline</span>
	<span>Inline</span>
	<span>Inline</span>

[css]

h1 {
	display: inline-block;

	width: 100px;
	height: 100px;
	background-color: yellow;

	margin-top: 100px;

}

span {
	display: block;

	width: 100px;
	height: 100px;
	background-color: pink;

	margin-top: 100px;
}

h2 {
	display: inline;

	width: 100px;
	height: 100px;
	background-color: green;

	margin-top: 500px;
}

h 1タグデフォルトはmargin、padding->削除する必要があります

Block:上下配置操作が可能で、スペースを空けることができる

Inline:上下に置けない、スペースがない

display:選択したタグの陣営(inline/block)

を変更できます.
※display: inline-block;:x軸整列(インライン)、上下配置操作/空間存在(block)、メニューボタン作成時によく使用されます.
※注意inline(+inline block)の間に空白があります

4. Vertical-Align

[html]

	<span class="inline">Inline</span>
	<span class="inline-block">Inline-Block</span>
	<img src="https://via.placeholder.com/200">
	<img src="https://via.placeholder.com/200">
	<img src="https://via.placeholder.com/200">
	<h1>Block</h1>

[css]

.inline-block {
	display: inline-block;

	width: 100px;
	height: 100px;
	background-color: yellow;
}

.inline, .inline-block, img {
	/*vertical-align: top;*/
	/*vertical-align: bottom;*/
	/*vertical-align: middle;*/
}

vertical-align: top;:兄弟関係で最大のスペースを占有する値に基づいて、上部で

vertical-align: bottom;:兄弟関係で最大のスペースを占有する値に基づいて、下部で

vertical-align: middle;:兄弟関係で最大空間を占有する値に基づいてソート

※img:x軸整列占有空間(inline block性質)

5. Position

[次元]

1次元:直線

2 D:平面、2つの平面を重ねることはできません.

3次元:箱、2つの平面が重なることができます.(z軸影響)

ホームページは2次元と3次元を組み合わせたものです.

[位置の性質]
1.marging-topを使用する場合、親子間の合併が発生するかどうか
-> margin-top: 100px;2.top、right、bottom、left属性が使用可能かどうか
-> top: 100px;3.子ラベルの高さ値が親ラベルに影響するかどうか
->(親ラベル内)/*height: 300px;*/

(1) static

[html]

	<div class="static-parent">
		<div class="static-child"></div>		
	</div>

[css]

.static-parent {
	width: 300px;
	height: 300px;
	background-color: yellow;
}

.static-child {
	position: static;

	width: 150px;
	height: 150px;
	background-color: blue;

	margin-top: 100px;
	top: 100px;
}

親と子の間のmarginマージ現象:O

top/left/right/bottom使用:X、左から右、上から下へ順に積み重ねます.

サブラベルの高さ値を親ラベルに適用:O

position: static;:まず、すべてのラベルは最初はposition:静的であった.

2 Dプロパティ

(2) fixed

[html]

	<div class="box1"></div>

	<div class="fixed-parent">
		<div class="fixed-child"></div>
	</div>


	<div class="box2"></div>

[css]

.box1 {
	width: 300px;
	height: 200px;
	background-color: gray;
}

.fixed-parent {
	width: 300px;
	height: 300px;
	background-color: yellow;
}

.fixed-child {
	position: fixed;

	width: 100px;
	height: 100px;
	background-color: blue;

	margin-top: 100px;
	top: 100px;
}

.box2 {
	width: 300px;
	height: 2000px;
	background-color: green;
}

親と子の間のmarginマージ現象:X

top/left/right/bottom:O,ブラウザ左上隅

に基づく

サブラベルの高さ値を親ラベルに適用:X

3 Dプロパティ

position: fixed;:固定スクロール不動

(3) relative

[html]

	<div class="box1"></div>

	<div class="relative-parent">
		<div class="relative-child"></div>
	</div>

[css]

.box1 {
	width: 300px;
	height: 200px;
	background-color: gray;
}

.relative-parent {
	width: 300px;
	height: 300px;
	background-color: yellow;
}

.relative-child {
	position: relative;

	width: 100px;
	height: 100px;
	background-color: blue;

	margin-top: 100px;
	top: 100px;
}

親と子の間のmarginマージ現象:O

top/left/right/bottom使用:O,元の位置に基づく

サブラベルの高さ値を親ラベルに適用:O

2 D+3 Dプロパティ

(4) absolute

[html]

	<div class="box1"></div>

	<div class="absolute-parent">
		<div class="absolute-child"></div>
	</div>

[css]

.box1 {
	width: 300px;
	height: 200px;
	background-color: gray;
}

.absolute-parent {
	width: 300px;
	height: 300px;
	background-color: yellow;
}

.absolute-child {
	position: absolute;

	width: 100px;
	height: 100px;
	background-color: blue;

	margin-top: 100px;
	top: 100px;
}

親と子の間のmarginマージ現象:X

top/left/right/bottom:O,ブラウザ左上/親ラベル領域

に基づく

サブラベルの高さ値を親ラベルに適用:X

3 Dプロパティ

※親ラベルの位置はabsolid/fixed/relation:top、leftの基準点は親ラベル領域を基準とする
※親タグの位置はstatic:top、左の基準点はブラウザ左上隅
[position関係]




学習中の難点や未解決の問題
positionの属性値を学習する場合,種々の条件下での結果の変化を正確に把握することは困難である.また,相対的および絶対的にtop値を適用する基準点については,まだ明確な概念はない.
ソリューションの作成
cssファイルを修正し、4 x 4 x 3=48の場合の数字を生成し、一つ一つ確認し、Excelに整理する.サブラベルも追加され、相対的な基準点と絶対的な基準点の違いを自分の目で確認しました.
[html]

	<div class="box1"></div>

	<div class="absolute-parent">
		<div class="absolute-child"></div>
		<div class="absolute-child-2"></div>
	</div>

[css]

.box1 {
	width: 300px;
	height: 200px;
	background-color: gray;
}

.absolute-parent {
	/*position: static;*/
	/*position: fixed;*/
	/*position: relative;*/
	/*position: absolute;*/


	width: 300px;
	height: 300px;
	background-color: yellow;
}

.absolute-child {
	/*position: static;*/
	/*position: fixed;*/
	/*position: relative;*/
	/*position: absolute;*/

	width: 100px;
	height: 100px;
	background-color: blue;

	margin-top: 100px;
	top: 100px;
}


.absolute-child-2 {
	/*position: relative;*/
	/*position: absolute;*/

	width: 100px;
	height: 100px;
	background-color: red;

	top : 300px;
}

1つ1つ注釈し、結果を目で確認し、相対的および絶対的な上部値の基準点がそれぞれ元の位置と親マーキング領域であることを視覚的に理解できる.
学習の心得.
私が理解していない部分のコードを直接追加して結果を確認すると、最初は2つのサブラベル領域が重なり、私自身が基準点を混同してしまい、困っていました.しかし,コードをゆっくり観察し,標準点を明確に理解するとともに,Excelテーブルにまとめることもより楽になったように感じる.今後も疑問があれば,コードを修正し,結果を視覚的に確認し,学習を行う.