■概要
CSSでwidthとheightを計算する方法は個性があります。
一回覚えれば大したことはないので、これから学習しましょう。
■content-box
例え、widthに200pxを設定した場合、全体の幅が200pxになるわけではなく、paddingとborder-widthが足されて描画されます。
この描画方法をcontent-boxと言い、box-sizing属性をcontent-boxに指定すると上記の方法で描画します。
■例
<style>
.content-box {
box-sizing: content-box;
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid black;
background-color: white;
}
.content-box .child{
width: 200px;
background-color: #ddd;
}
</style>
<div class=”content-box”>
<div class=”child”>200px child</div>
</div>
出力結果
200px child
■border-box
これは、IE8以上から使えます。
■例
<style>
.border-box {
box-sizing: border-box;
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid black;
background-color: white;
}
.border-box .child{
width: 200px;
background-color: #ddd;
}
</style>
<div class=”border-box”>
<div class=”child”>200px child</div>
</div>
出力結果
200px child
■content-boxのwidth:100%の時懸念事項
widthを100%で設定すると親のwidthを継承します。content-boxの場合にwidth:100%を指定すると描画に問題が発生することがあります。
こういう時には、box-sizingをborder-boxにするかwidthをautoにして解決できます。
■例
<style>
.parent1 {
width: 300px;
border: 5px solid black;
background-color: white;
}
.parent1 > div {
padding: 30px;
background-color: green;
margin-bottom: 30px;
border: 3px solid #2e88b5;
}
.parent1 .child1 {
width: 100%; /* 問題になるパターン */
}
.parent1 .child2 {
width: 100%;
box-sizing: border-box; /* 解決方法1 */
}
.parent1 .child3 {
width: auto; /* 解決方法2 */
}
.parent1 .child4 {
/* widthのデフォルト値: auto */
}
</style>
<div class=”container1″>
<div class=”child1″></div>
<div class=”child2″></div>
<div class=”child3″></div>
<div class=”child4″></div>
</div>
出力結果
