こんばんは、kobasaです(´ω`*)今日は初めての平日学習です。
仕事終わってからだと2時間くらいしか勉強できませんね…なかなか進まない
3日目の勉強内容
- 前日分内容の定着ドリルを解く
- CSSで要素の余白や位置を指定する
定着ドリルを解く
テックキャンプではその日勉強した内容を1日後、4日後、7日後に復習するようになっています。
それが定着ドリルというもので、slackで各々に送られてくるんですね。
なので昨日に勉強した5項目の定着ドリルを解くことに。中身は選択式のサクッと振り返る程度の問題でした。がっつり記述式じゃ今日の勉強できないもんね…
CSSで要素の余白や位置を指定する
余白の指定
ブロックレベル要素を箱として考えることをボックスモデルという。
インライン要素では基本的に使えない。
箱の内側から順に、content(中身)、padding(内の余白)、border(枠線)、margin(外の余白)
background-colorが働くのは内の余白のpaddingまで。
図解でないとまとめられない(´・ω・`)
位置の指定
positionプロパティと位置を表すプロパティを組み合わせることで、
要素を好きな位置に指定することができる。
position: absolute;を使用することで、要素の位置を絶対位置で指定できるようになる。
top、left、bottom、right相対位置から絶対位置までの距離を指定する。
top: 20px; left: 20px; なら要素の絶対位置から上と左に20pxの場所に相対位置がある。
相対位置は初期ではブラウザの左上にあるのだがposition: relative;を適用することによって
子要素にとっての相対位置がrelativeを適用した親要素の位置となる。
これも図がないとしっかり説明できないな(´・ω・`)パパっと作れたらいいんだけども
コメント