这两日为做一张网页而头破血流,亏得我是男儿,流血不流泪。
众所周知网页由一块块组成,常用div。而块与块之间的因美观需求需要对内外边距调节,因此要注意到盒子模型:

?

?
由上面两幅图得出:margin外边距也是盒子中的一部分,而我们时常是根据内部的各div尺寸总和定外层div的尺寸,却忽略了margin的尺寸。因此,需要在此强调盒子的尺寸计算公式:
1.没有子div:
|
Width |
width?+?padding-left?+?padding-right?+?border-left?+?border-right |
|
Height |
height?+?padding-top?+?padding-bottom?+?border-top?+?border-bottom |
2.拥有子div:
|
Width |
width?+?padding-left?+?padding-right?+?border-left?+?border-right+子div+margin-left+margin-right |
|
Height |
height?+?padding-top?+?padding-bottom?+?border-top?+?border-bottom+子div+margin-top+margin-bottom |
????在此,笔者就犯了大错误,用子div的尺寸之和定义外层div的尺寸导致用外层div并列的其他div被挤出,造成页面的崩溃。