最近、勉強より、ツイッター見てる時間長いかもと感じるこのごろです。
今日は、box-sizing:border-boxについて記述したいと思います。(うまく説明できるかな？…)
まず、要素を囲むのは内側から順に、コンテンツ➡padding➡border➡marginという順番で構成されてます。
うーん。この辺も図があるといいですね…
ここからが本題です。
box-sizingのいいところ
1、要素からどうしてもpaddingがはみ出るときに使える。
2、線がはみ出てしまうときに使える。
・何も設定しない場合(デフォルト値)は、content-boxです。
・border-boxは、横幅や高さにpaddingを含めると覚えればOKです。
つまり、デフォルト値で、widthを設定したら、paddingはwidthは入らない。
しかし、border-boxにするとpaddingを含めることができます。
じゃあ、これでどう変わるの？と思われると思いますが、
1、widthの指定を500pxにしたとき、paddingを指定したら、paddingは500pxの中に入らない。つまり、width500pxの外にはみ出ます。
2、自分が難しかったのは、上記の場合、width,border,paddingが100%を超えていて、要素が100%になればいいんだったら、 width,border,paddingを100%になるようにすればいいのでは？と思ったのだが、実際はborderには%を指定できないのでした！！
ちなみに、borderなんて使うことあるんかいと思っておりましたが、文字を強調するとき文字を四角で囲みますよね…そういえば、border-○○のプロパティで太さ調整していたことすっかり忘れてました(笑)
それを考えたら、borderには%使えないのも納得ですな(｀・∀・´)ｴｯﾍﾝ
細かい事が多すぎ、ケイン・コスギ。
以上です。
もりけん塾 https://terracetech.jp/ourvalue/morikenjuku/
もりけん先生https://terracetech.jp/
コメント