css3回目

Iさんのcss3回目のレッスンです。
宿題としていたページまでご自分できっちり書いてきて、わからないところは付箋にメモして質問してくれました。えらい!

質問はブロックレベルとインラインレベルについて、box-sizingについてです。

cssの基本的な考え方にボックスモデル、というのがあって、要素は箱の中入っているイメージです。その箱の中は、外側からマージン、ボーダー、パディング、コンテンツ、となっているんですね。
この箱がブロックのように縦に積み重なっていって、それをブロックレベルの要素、と呼びます。大抵の要素はこのブロックレベルです。

が、

aタグやimgタグなどのいくつかの物は、ブロックを作らず、行内に入り込んだようになります。それをインラインレベル、と呼びます。

box-sizingはwidth, heightを指定しているコンテンツにborder, paddingを入れると領域が広がってしまって計算が難しい;
そこで、box-sizing:border-boxと書いておくと、borderまでを領域と計算してくれるので、あとはマージン管理だけでよくなるのでわかりやすい、といった感じのプロパティです。(伝わるかな;)

などという、難しいお勉強をしました。

くじらカフェのサイトも残すところあと2ページ!あとちょっとです。
しっかりと家で進めてきてくださるのでスムーズに進んでいますね。このペースで、&自宅学習のペースをちょっと上げてもらって、あと2回で完成・・・するかな??と目処が立ってきました。
がんばりましょう。