2021.05.24(レイアウトCSS)

学習の心得.

[箱の型番]

htmlとbodyラベルにはデフォルトの余白とpaddingが含まれています.そのため、余白を除去するには0

に初期化します.

margin: 0;
padding: 0;

borderを基準として、外側縁内側に

を充填する.

100 px 01000 px(右上左下隅)、1行のタグでWebブラウザの応答速度

を向上

margin: 100px 0 0 100px;
padding: 100px 0 0 100px;

box-sizing: border-box;指定する寸法範囲内で寸法

を変更する.

box-sizing: border-box;

[連結利益]

兄弟の間に現れるエッジマージなどの領域を共有するが、より大きなサイズに沿って

減少(互いに共有)する.

.margin-one{
	margin-bottom: 100px;
}
.margin-two{
	margin-top: 50px;
}

両側に150 pxではなく大きな値に沿ってマージン領域が追加され、margine-bottom 100 pxのみが適用されます.

親子間の格差合併現象は、子どもに格差を与えても、親は

を使って共通適用の問題を解決しなければならない.

.margin-child {
	margin-top: 100px;
}

[Display]

Block(空間を作成可能)要素行(空間を作成できない)要素

表示属性により行内要素およびブロック要素

を置換することができる.

display: inline; /* block을 inline으로
display: block; /* inline를 block으로

inline要素とblock要素

を一度に適用

display: inline-block;

[Vertical-Align]

の垂直整列属性によって行内要素をソート(同級行内要素の最大値に基づいてソート)*行内要素のみ

を使用できます.

vertical-align: middle; /*top(상단), bottom(하단), middle(중앙)

[Position]
1.marging-topを使用すると親子のようなmargin合併が発生するか
2.top、rigent、bottom、leftプロパティを使用できるかどうか
3.子供の身長が親に影響するかどうか
1)静的属性(2 D特性、Positionのデフォルト値は静的)

親子の間にエッジ合併現象が発生margin-top: 100px;*絶対、固定して余白を結合しない

top、rigent、bottom、leftは使用できませんtop: 100px;

親に高い値がなくても、子供の高い値は親に影響します.
2)固定プロパティ(3 Dフィーチャー)

親子の間にエッジ合併は発生しないmargin-top: 100px;

top、rigent、bottom、leftが使用可能(ブラウザの左上隅に対して移動)top: 100px;

親は高さ値がありませんが、子供の高さ値は親に影響しません.

3)相対(2 Dフィーチャー+3 Dフィーチャー)

親子の間にエッジ合併現象が発生margin-top: 100px;*fixedとabsoluteはマージされません

top、rigent、bottom、leftが利用可能(初期位置移動ベース)top: 100px;

親に高い値がなくても、子供の高い値は親に影響します.
4)absoulute(3 Dフィーチャー)

親子の間にエッジ合併は発生しないmargin-top: 100px;

top、rigent、bottom、leftが使用可能(ブラウザの左上隅に対して移動)
*初期位置に対して固定、絶対、相対的に移動top: 100px;

親は高さ値がありませんが、子供の高さ値は親に影響しません.

*親の位置によってtop属性の座標基準値が異なります

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

の難点は、レイアウトが位置属性によって変化することであり、キャプチャが困難であることである.ここで、サブアイテムがfixedの場合、レイアウトの組織方法が少し異なり、少し困難に感じます.

ソリューションの作成

fixedを除くサブロケーション値をチェックするフィーチャーに基づいて、親ロケーションを大幅に変更し、デフォルトのロケーションとは異なるフィーチャーをチェックします.少し難しいfixedでは、まず他の位置の熟練度を高めてからfixedをいくつか変形して解決することができます.

学習の心得.

実際のホームページに適したレイアウトプロパティを学習できて嬉しいです.ホームページコードから学んだプロパティがわかります.これはより適切な学習です.positionにもこのタイプがあり、これで終わるのではなく、属性値に基づいて適用する例があり、よく知らない人でもすぐに習得できます.