ボックスの中にボックスを4つ並べる時、CSSは次のように記載します。
{ width: 25%; }
ブラウザで100%で表示していた場合は4列で表示されますが、ブラウザを縮小して表示した場合、崩れてしまう場合があります。
4列に表示されています。
4列目に空白ができ、3列に表示されています。
boder:1px ですが、レイアウトを確認すると border:1.111 です。
縮小して表示する場合、widthが4(25%)で割れない場合、ChromeやFirefoxでレイアウトが崩れる場合があるようです。拡張(ズーム)や縮小の時には、自動でピクセル値が再計算されます。その計算の方法は、利用しているブラウザによって違うようです。
上部が100%の数値で株が90%縮小の数値です。
100%も90%の縮小の場合も、Borderは1pxです。
上部が100%の数値で株が90%縮小の数値です。
100%と90%の縮小の場合で、borderの数値が変わっています。
上部が100%の数値で株が90%縮小の数値です。
100%と90%の縮小の場合で、borderの数値が変わっています。
.content { width: calc(25% - 2px); }
90%に縮小した時に、Chromeでは1pxのborderは1.111px、Firefoxでは1.11667pxで表示されています。
width 1349pxを90%にすると、100%は1498.8888・・・となります。 1349/0.9=1498.8888 |
width 1349pxを90%にすると、1498.8888・・・
IEは、90%に縮小しても4列になります。
border 1pxは、1.111・・・・pxです。自動的に widlh が算出されます。
1349px × 1.1111111640930176px=1498.88960・・・・(6を繰上げ)
Chromeは90%に縮小すると、1498.890pxに収まらず、3列になります。
border 1pxは、1.11667px です。自動的に widlh が算出されます。
1349px × 1.11667=1506.38783px
Firefoxは90%に縮小すると、1506.38pxに収まらず、3列になります。
width 1349pxを90%にすると、100%は1498.8888・・・となります。
calcで計算式を指定することができます。横幅を4分割(4列)にして、左右のborderを1pxずつにすると、次のように記載します。
boder の値、2pxを引いていますが、ChromeとFirefoxで90%に縮小した場合のborderの値は2pxではありません。
※margin 0px border 1px
ブラウザ 縮小 | border | width:calc(25%-2px) | width |
---|---|---|---|
IE 100% | 1 | 335.25 | 1349 |
IE 90% | 1 | 372.72 | 1498.89 |
Chrome 100% | 1 | 335.250 | 1349 |
Chrome 90% | 1.111 | 372.708 | 1498.890 |
Firefox 100% | 1 | 325.25 | 1349 |
Firefox 90% | 1.11667 | 374.584 | 1506.38 |
左右のmargin 5pxと左右のborder 1pxで 25%-12px となります。
ブラウザ 縮小 | border | width:calc(25%-12px) | width |
---|---|---|---|
IE 100% | 1 | 335.25 | 1349 |
IE 90% | 1 | 362.72 | 1498.89 |
Chrome 100% | 1 | 335.25 | 1349 |
Chrome 90% | 1.111 | 362.708 | 1498.890 |
Firefox 100% | 1 | 335.25 | 1349 |
Firefox 90% | 1.11667 | 364.584 | 1506.38 |
{ box-sizing: border-box; }
box-sizingプロパティ は、boxの幅(width)や高さ(height)の算出方法を指定します。widthやheightにpaddingやborderの幅と高さを含めるか含めないかを設定できます。
content-box | paddingとborderの幅と高さを含めない |
border-box | paddingとborderの幅と高さを含む |
inherit | 親要素の値を継承する |
ブラウザ100% | border | width:calc(25%-2px) | width |
---|---|---|---|
1.指定なし | 1 | 335.250 | 1349 |
2.content-box | 1 | 335.250 | 1349 |
3.border-box | 1 | 333.250 | 1349 |
box-sizing:border-box を指定している時、Chrome100%で表示した場合の計算
widthはborderの幅を含みます。
ブラウザ90%縮小 | border | width:calc(25%-2px) | width |
---|---|---|---|
1.Chrome 90% | 1.111 | 372.708 | 1498.890 |
2.content-box | 1.111 | 372.708 | 1498.890 |
3.border-box | 1.111 | 370.486 | 1498.890 |
box-sizing:border-box を指定している時、Chrome 90%で縮小表示した場合の計算
widthはborderの幅を含みます。
90%に縮小しても、1498.890pxに収まり、4列になります。
ブラウザ 縮小 | border | width 25% | width |
---|---|---|---|
Firefox 100% | 1 | 335.25 | 1349 |
box-sizing:content-box | 1 | 335.25 | 1349 |
box-sizing:border-box | 1 | 333.25 | 1349 |
box-sizing:border-box を指定している時、Firefox 100%で表示した場合の計算
widthはborderの幅を含みます。
ブラウザ 縮小 | border | width 25% | width |
---|---|---|---|
Firefox 90% | 1.11667 | 374.584 | 1506.38 |
box-sizing:content-box | 1.11667 | 374.584 | 1506.38 |
box-sizing:border-box | 1.11667 | 372.35 | 1506.38 |
box-sizing:border-box を指定している時、Firefox 90%で縮小表示した場合の計算
90%に縮小しても、1506.38pxに収まり、4列になります。
例えば横幅、width をパーセントで指定する場合、全体を100%にしますが、border(線)やpaddingの値を考慮すること。子要素の幅が親要素の幅を超えると、レイアウトが崩れてしまいます。
Internet Explorer 8以降、Google Chrome、Firefox、Safari バージョン3以降、Opera バージョン8以降。