日常错误

在设置div的float属性时，绿色部分被块元素给挡住了，原因是因为未设置绿色部分的宽度，所以浏览器默认是auto，在css样式中把它的宽度弄小一点就好了。

在这个页面中body的外边距是20%（左边右边），所以剩下部分是60%。绿色部分（设置了id=“guarantee”），将其width：60%，是指占它父元素的60%；把width：100%才是整个body的60%（会延伸到饮料那里去）。

修正边栏与主内容融合在一起的问题

解决：如果为主内容设置适当的外边距，让外边距和边栏的宽度相等，因为外边距是透明的，不会显示背景图像，所以页面本身的背景颜色(body ->banckground)会透过来，就可以达到效果。

为什么不直接设置主内容的宽度？

答：如果对内容区和边栏都设置宽度，会有一个问题，这样不允许页面正确地扩展和收缩。因为他们都有固定的宽度。

如果对主内容区和边栏都设置宽度：

#main {
  background:       #efe5d0 url(images/background.gif) top left;
  font-size:        105%;
  padding:          15px;
  margin:           0px 350px 10px 10px;
  width：900px;     /*将主内容区和边栏区都设置了宽度*/
}

#sidebar {
  background:       #efe5d0 url(images/background.gif);
  width:300px;
  font-size:        105%;
  padding:          15px;
  margin:           0px 10px 10px 10px;
  float:right;

}

将main中的宽度设置删除：

在做登录界面的时候，账号和密码会分行显示

错误原因：在设置了固定的窗口大小的同时，又设置了输入框和内边距（左边的大小），就没有很充足的空间给lable元素存放，所以就会到下一行去。

绝对布局会让大家忽略块的存在，相对布局不会让人忽略，固定布局会随着页面滚动而滚动，静态布局没有偏移量

错误：在使用表格布局时，增加iframe高度时，导航栏也会增加

相关的html------------------------------------------------------------------------------------------------------

CSS样式---------------------------------------------------------------------------------------------------

#other
{
   background-color:#CCC;
   width:80%;
   height:490px;
   text-align:center;
   /*vertical-align:top;*/ //将这个注释取消就可以得到解决
   margin:0px;
}
iframe
{
   border-style:none;
   background-color:#FFF;
   width:100%;
   overflow:visible;
   height:500px;
   margin:0px;
}

修改后：

但我想让iframe占满整个other块

猜你喜欢