学習の内容

進行状況と学習内容を作成し、ソースファイルを実行した結果を添付します.
チャレンジ(先週のHTML(設計図練習)、CSS練習、基本レイアウト練習)提出/github

箱型番
-利益.パッド型.コンテンツ

1)利益/ガスケットの移動状況はどうですか.
margin-left: 100px;
padding-left: 100px;

移動は、空白を基準として100 px移動である.

2)コードの作成が簡単:コードコンポーネントが長ければ長いほど、ブラウザのロード速度が遅くなります.
margin: 100px 0 0 100px;
padding: 100px 0 0 100px;
=
margin-left: 100px;
margin-top: 100px;
padding-left: 100px;
padding-top: 100px;
3)command+/->コメントの迅速な処理

連結利益

-兄弟の間/親子の間
1).margin-one {
width: 100%;
height: 100px;
background-color: yellow;

margin-bottom: 100px;

}

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

margin-bottom: 100px;

}
2).margin-parent {
width: 300%;
height: 300px;
background-color: yellow;
}
.margin-child {
position: absolute;

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

margin-bottom: 100px;

display

1) inline
2) block
3) inline-block

vertical-align

position

一次元、二次元、三次元差異

static

fixed

relative

fixed

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

の利益を連結し、学習表示部分を補充する必要があります.視覚要素を適用するときは想像できません.

z-index、floatとclear、overflow、flex、どのように集中的にソートするか、練習:基本レイアウトは明日追加します.

ソリューションの作成

カピケットのWebサイトに基づいて練習を行い、より多くの時間をかけてカリキュラム

を再確認します.

学習の心得.

簡単なカートサイトで練習...
看板サイト:民兵哲友携帯
https://app.uphone.co.kr/v2.html?mc=SAGG_phonekw&utm_source=google_pc&utm_medium=sa_lt&utm_campaign=N_SA_%EC%A0%84%ED%99%94%EC%98%81%EC%96%B4%EB%8C%80%ED%91%9C&utm_content=A-01.%EB%8C%80%ED%91%9C%EC%A0%84%ED%99%94%EC%98%81%EC%96%B4&utm_term=%EC%A0%84%ED%99%94%EC%98%81%EC%96%B4&gclid=CjwKCAjw47eFBhA9EiwAy8kzNPnV_Ft8xq71u3r2d7E0vjI70i-f_hP6XGpl6mnsO1jkobJlqEOegBoCe0wQAvD_BwE