main要素のdisplayはIEではinlineになっている
display:blockを使う。main要素はhtml5~導入された。文書の主要なコンテンツであることを示す。hidden属性がないmain要素を複数置くことはできない→hiddenで切り替えれば表示上は必ずmainは一つになる。IEではdisplay:inlineになる仕様。chrome/firefoxではblockである。
box-sizing: border-box;
ユニバーサルセレクタ
box-sizingのデフォルトはcontent-boxであり、これによりレイアウトが崩れることはわかった。またこれを直すためには、border-boxが使える。しかし関連するレイアウトすべてについてbox-sizingを入れていくのは面倒くさいし、確認するにも手間がかかる。そこで利用できるのはrootノードからの継承と、ユニバーサルセレクタである。box-sizingについては上書きが発生しないと困るのでここではユニバーサルセレクタを使う。
*,::before,::after {box-sizing: border-box;}
overflowを起こしたときに
autoにしてあらかじめ決められた枠組みでscroll barが出るのが望ましい。
heightをwidthの枠組み
widthは%でレイアウト組をするのが簡単。heightはそれは使わないほうが良い。