学習ログ210524

1792 ワード

学習の内容


進行状況と学習内容を作成し、ソースファイルを実行した結果を添付します.
Boxモデル、Marginマージ、表示、垂直Align、Position
Box Model
モデル領域4種類の余白、border、padding、contents
box-size:作成したスペースのサイズに合わせて調整します.
マージMargin
親と兄弟の間に起こるエッジ合併現象.
大きなmarginは兄弟ラベルのmarginを食べます.
Display
スペースを作成できない行のラベルは、余白や塗りつぶしには適用されません.
行間隔が空白(スペース?)所有する.
ボックスのプロパティをdisplayに変換します.
inline-blcok:x軸で、主にスペースサイズを割り当てるメニューボタンに使用されます.
h 1デフォルトの余白と塗りつぶしは初期化する必要があります.
Vertical Align
Vertical-alignプロパティはinline、inline-blockプロパティに使用できます
blockタグには何も起こっていません.
Position
positionを使用する際の注意点
1.marging-topを使用すると、親と子の間のmarginマージ現象が発生するかどうか
2.top、right、bottom、left属性を使用できるか
3.子供の身長が親に影響するかどうか
位置タイプ
静的(2 Dに含まれる属性値)
-marginマージが発生しました
-top右左ランプは使用できません
-親の高さが不明な場合
サブアイテムの高さ(height)値が影響します
-すべてのhtmlタグ
positionを使わなくても
デフォルトでは静的プロパティ
固定(3 Dプロパティ)
-marging-topを使用すると、親と子の間のmarginはマージされません.
-トップライトを使用するときのブラウザの左上隅に対する移動
-親が高さ値を持たない場合、子の高さ値は影響を受けません.
相対(2 D 2 D 2 D 2 Dフィーチャー)
-marging-topを使用すると、親と子の間のmarginマージ
-トップランプ使用時の最初の位置に従って移動
-親が高さ値を持たない場合、子の高さ値は影響を受けます.
absolute(3 Dプロパティ)
-marging-topを使用する場合、親と子の間のmarginマージはありません.
-topを使用するときのブラウザの左上隅に対する移動
-親が高さ値を持たない場合、子の高さ値は影響を受けません.
-親の位置による
親が2 Dプロパティを持っている場合、topなどはブラウザで移動します.
親が3 Dプロパティを持っている場合、topなどは親の移動に基づいています.

学習中の難点や未解決の問題


Positionの種類と熟知度

ソリューションの作成


fixedは特殊な場合なので使用しませんが、
静的エッジと相対エッジが結合されているため、2 Dです.
absoluteはmarginをマージしていないので3次元です
静的および相対的に親の高さに影響します.
absoluteは親の高さに影響しません
静的はtop rightなどの使用できない2 D
相対的および絶対的に使用可能な3 D
静的-相対的(2 D)
静的-相対(高さ)
絶対-相対(3 D)
よく知っている

学習の心得.


以前知っていた内容もまた思い出します.
positionでは相対や絶対などを用いた.
具体的な違いが分からないので、役に立つ講座です