CSS研究结果.docVIP

关于Border、Padding的实验报告 首先声明：所有Div都是直接代码生成，没有设定height，外Div都没设置width。 以下三图分别为IE7、FF3和VS设计视图下的显示。 当Border和Padding设置一致时，显示效果是一样的。 内Div的宽度设置80%表示宽为外Div的宽度（设为W）的80%，而如果此时的外Div有Padding或Border，则外Div的可容纳宽度比W小，那么内Div的宽度就不能设置100%了。 Border不能设置为%，在VS中，Border设置为百分比是有显示的，但是浏览器中均没有。而无论设置10%还是5%，在设计视图始终显示一样。 style type=text/css .border { border:solid 15px #000; } #color { background-color:#eee; } .percentwidth { width:80%; background-color:Chocolate; } .percentwidth0 { width:100%; background-color:Chocolate; } .percentwidth1 { width:90%; background-color:Chocolate; } .padding15 { padding:15px; background-color:DarkCyan; } .borderpercent { border:solid 5% red; } .borderpercent1 { border:solid 10% black; } /style form id=form1 runat=server div div class=border实心边线宽15px/div div id=color无边宽/div divdiv class=percentwidth宽为80%/div/divdivdiv class=percentwidth0宽为100%/div/div div class=borderdiv class=percentwidth实心边线宽15px，内宽为80%/div/div div class=borderdiv class=percentwidth0实心边线宽15px，内宽为100%/div/div div class=padding15div class=percentwidth外层Padding15px，内层宽为80%/div/div div class=padding15div class=percentwidth0外层Padding15px，内层宽为100%/div/div div class=borderpercent边框为长度的5%/div div class=borderpercentdiv class=percentwidth外层边框为长度的5%，内层宽80%/div/div div class=borderpercentdiv class=percentwidth0外层边框为长度的5%，内层宽100%/div/div div class=borderpercentdiv class=percentwidth1外层边框为长度的5%，内层宽90%/div/div div class=borderpercent1外层边框为长度的10%，但显示和5%一样/div /div /form 当div中没有文字时，在VS设计视图中布局没有改变，但在IE7和FF3中是： 火狐不会显示没有内容的Div块，Border属于内容，所以Border（设置为%的除外）会显示，并且无内容时默认以Border颜色为背景色。 接下了实验设定外Div宽度的 外层Div的width设置为500px，内层依旧百分比。 再测试有内容的效果： 再分析Border是否占容积： 如图所示，宽500，border15的总长度是530。内宽450和90%一样，说明此时认为外宽是500，尽管它实际占用了530。也就证明在此种情况下，Border是不占容积的。 一切实验以浏览器显示效果为主，切勿一直认为设计视