1.学習内容

レイアウト

箱のモデルとは何ですか.Webサイトを作成するときに、レイアウトの空白または構造をすばやく表示するオプションです.
箱型の4つの構成部分

1.margin 2.border 3.padding 4.content

タグのオンとオフの間の内容を覚えておいてください.すなわち、divタグによればhelloworld自体がcontentであり、bodyタグによればdivタグ自体がcontentである
marginおよびpaddingは、特定のオブジェクトを移動する(座標配置操作を使用する)、marginおよびpaddingを区別する要素をborderと見なします.
利益もダウンジャケットも勝手ではなく、他人(新しく生成された空白)が推進している.
margin padding値を追加すると、1つずつ追加すると、コード成分が増加し、ブラウザのロード速度が遅くなるため、使用回数は==1回と同じになります.書く順番が12の場合は時計回り、つまり右上下左
注意点:黄色のボックスが200 x 200の場合は正方形で、矩形の理由paddingを使用すると空間自体が展開されるため、実際の黄色width値は300です.(100 padding値を追加)
paddingを適用するときにスペースサイズを保持する場合は、box-size:border-boxを選択します.使用します.属性を適用する領域のサイズに応じて、枠線とチャージをサイズ内に設定します.
ブラウザと枠線の間に小さな空白(htmlとbodyラベルにも生まれつきの余白とpadding)があり、htmlとbodyの両側に余白とpadding値0-一番下のコードを与えます.
ウェブサイトを作成する場合、htmlとbodyラベルの余白とpaddingはデフォルトでアプリケーション0のコードを追加することが望ましい.
注記ショートカット:ctrl+/

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

css
.box-model {
	width: 200px;
	height: 200px;
	background-color: yellow;
	border: solid 10px red;
	box-sizing: border-box;
       1==========================
        margin: 100px 0 0 100px;
	padding: 100px 0 0 100px;
       2==========================
        margin-left: 100px;
	margin-top: 100px;
	margin-bottom: ;
	margin-right: ;
	padding-right: ;
	padding-bottom: ;
	padding-left: 100px;
	padding-top: 100px;
       ===========================
}

html, body {
	margin: 0;
	padding: 0;
}

利益合併現象

1.兄弟の間

marging-bottom 100を1つ与えると、黄色領域(1)を基準にして下に100個のスペースがあり、青領域(2)が押されます.
その場合、margin-2にmarging-top 50を加えれば青は50に下がると思っていたのですが、変わりませんでした.
すなわち、margine-one bottomとmargine-two topはスペースを共有します(大きな値の優先度が高い=大きな値が小さい値をマージします).トップの値が150に増えると、青がさらに下がります.結論100は同じ値を与え,2つの領域は100 pxと呼ばれる空白を共有する.

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: 100px;
}

2.親子

Webサイトを作成する際に最も一般的な問題.child top 100をあげると、子供だけ動くと思っていたのですが、一緒に移動-->解決方法:position属性を使う

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;
}

display

前回の授業でhtmlを勉強するのは大きく2つの陣営に分かれています.ブロックとインライン
両者の違いは、blockは連続作成時にy軸に整列(改行現象)し、inlineはx軸に整列(改行しない)することである.
残りの違いを学びましょう.

最初のブロックはスペースを作成できますが、インラインできません(下図参照)

blockの間に空白がある理由は?h 1タグが使用され、h 1タグにもデフォルトの余白と塗りつぶし値があるため、0にする必要があります(現在は使用されていません)

2番目のブロックは上下に配置でき、インラインできません。

h 1(ブロック)-->インライン、span(インライン)-->ブロックを置き換えるときに使用するものを表示します.
inline-block:x軸整列(inline)+width、height値を適用し、上下配置(block)を使用可能
inline-blockメニューボタンの作成によく使われます
inline要素を使用するときの注意点:各領域の間にスペースがあります(デフォルト)

html
<h1>Block</h1>
<h1>Block</h1>
<h1>Block</h1>
 
<span>Inline</span>
<span>Inline</span>
<span>Inline</span>
 
css
h1 {
	width: 100px;
	height: 100px;
	background-color: yellow;
	margin-top: 100px;
    	display: inline-block;
}
span {
	width: 100px;
	height: 100px;
	background-color: pink;
	margin-top: 100px;
    	display: block;
}

表示の適用

Vertical align

inline要素のみに適用され、block要素には適用されません.
整列したいときに使う属性
top:兄弟関係の最大値に基づいて行内要素を最上位に配置
middle:中央揃え
imgラベルはどうしたの?imgタグはdisplay inline blockの性質を有する.学習内容から、複数のimgを生成する場合、x軸を揃えてサイズを調整できます

html
<span class="inline">Inline</span>
<span class="inline-block">Inline-Block</span>
<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, h1{
	vertical-align: middle;
}

Position（困難かつ重要）

次元の理解

2 D(平面)異なる箱が貼られていると、一緒に押されます.
3 Dは現実世界です.Z軸コンセプトの登場により、PS層コンセプトと見なすことができます.
なぜ次元を知っているのですか?Webサイトを作成するときに、2 Dと3 Dをブレンドするためです.
職階学習時の3つのケースの数

1.marging-topを使用すると、親子間の利益合併につながるかどうか

2.top、right、bottom、leftを使用するかどうか(例ではtopベース)

3.子の高さが親に影響するかどうか

poission 4属性値

1. static 2.fixed 3.relative 4.absolute

Poissonの勉強方法
1.親子関係を築く
2.親の中毒状態(4)
3.子供の中毒状態(4)
4 x 4=16 x 3種の場合の擬数(m.t,trbl,p/c height)=48種

48種類の場合のレイアウトマスター要因を理解

static

デフォルトではhtmlはすべてposition-static状態です
1.magin-top使用時の麻疹合併(o)
2.top、r、b、lは使用できません(x)
3.親の高さ値が不確定の場合、子の高さ値は親に影響します(o)
これらのフィーチャーは2 Dフィーチャー、すなわちstaticは2 D領域に含まれるプロパティ値です.

.static-parent {
	width: 300px;
	background-color: yellow;
}
.static-child {
	position: static;
	width: 150px;
	height: 150px;
	background-color: blue;
	margin-top: 100px;
	top: 100px;
}

fixed

使用すると青い円が移動し、移動するのではなく固定されていると考えられます.また、デパートのページをスクロールするときにフォローするバナー広告はこれを利用しています.
1.marging-top使用時の合併麻疹なし(x)
2.top、r、b、lは利用可能である(o)が、top移動の基準点はブラウザの左上隅に対して移動する、すなわち、座標基準点は最初のブルーボックス位置ではなく、ブラウザに対して移動する
3.親レベルの高さ値がない場合、子レベルの高さ値は影響を受けません(x)
これらのフィーチャーは、固定された3 D領域に含まれる属性値である3 Dフィーチャーです.
まったく反対だ

.box1 {
	width: 300px;
	height: 200px;
	background-color: gray;
}
.fixed-parent {
	width: 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;
}

relative

1.marging-top使用時に麻疹を合併(o)
2.top、r、b、lは使用可能(o)であるが、topは元の基準で移動する(ブラウザ内のx)
top(その他を含む)はmargin、paddingとは異なる.すなわち,marginとpaddingが空白に押し込まれて移動すると,topは自己主体で移動する.
3.子項目の高さ値が親に与える影響(o)
2 Dおよび3 Dフィーチャー(ブレンド)

.box3 {
	width: 300px;
	height: 200px;
	background-color: gray;
}
.relative-parent {
	width: 300px;
	
	background-color: yellow;
}
.relative-child {
	position: relative;
	width: 100px;
	height: 100px;
	background-color: blue;
	margin-top: 100px;
	top: 100px;
}

absolute

1.marging-top使用時の合併麻疹なし(x)
2.topが利用可能(ブラウザ内)(o)
3.子の高さ値が親に影響しない(x)
3 Dフィーチャーを持つ(固定フィーチャーと同じ)
逆にabsoluteはtop値が親位置に依存する状態座標基点を表す
静的(2 D)とは、座標基準点がブラウザに基づいており、親が3 D(fixed,absolute)である場合、座標基準点が親(fixed,absolute)に基づいていることを意味します.
相対的な2次元と3次元の特徴を持ち、親を基準に形成されている.

.box4 {
	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;
	top: 100px;
}

2.勉強中の難点

思ったより投資の種類が多く、理解に時間がかかりました.

3.ソリューション

私は知らない部分を教室に回して何度も見て、週末の実習を通じて、完璧に私のものになるつもりです.

4.勉強の心得

今日面白いことを学んで、いつもネットでショッピングしてあるいはウェブサイトを见る时とても私のBANAの広告についてどのように现れたことに好奇心があって、今日までやっとこの疑问を解消しました.