クールでかっこいいワードプレステーマ を カスタマイズすべ

box-sizing:CSSを使う場合の重要特記事項。

クールでかっこいいワードプレステーマ・・・VERいくつからなのかチェックしてないけど、
少なくとも、VER9は、CSS3 の box-sizing: を使ってる。
 

box-sizingとは?

例えば、ボックス(CSSの塊、例えば <div>~</div>)のサイズってのは、width:300px とやるとこんなイメージ。

borderの太さを 2px にするとボックスの幅は、300+2×2(左右)=304px ってことになる。
おなじボックスがならんだら? 304×2=608px そうなると、このボックスを囲んでいるボックス608pxのサイズを持つ・・・
けど、その中にパディングがはいったら?・・・ぎゃーーーー!!!ってことになる。
 
で、box-sizing: は、ひとまとめで 300px ってことにしてくれるプロパティだ。
 

電卓やメモがいらなくなるってプロパティだね。
 
つーことで、box-sizing を使っていないパーツを持ち込むときには要注意。
 
box-sizing プロパティの値
content-box padding と border の幅を要素の幅と高さにいれない ex.box-sizing:content-box;
border-box padding と border の幅を要素の幅と高さにいれる ex.box-sizing:border-box;
 
|<<先頭へ | <前へ次へ> | 最後へ>>|