关于background和height:100%的一些总结

来源：互联网发布：python 实现http接口编辑：程序博客网时间：2024/06/07 03:21

1.今天写练习的时候,给定body宽高，给定背景颜色background-color,但是并没有预期的背景颜色只出现在body给定宽高的区域，而是全屏幕。

HTML：

<body></body>

CSS:

body{width: 400px;height: 400px;margin: 0 auto; padding: 10px;border: 10px solid red;background-color: gray;}

然而却是这样的结果：

最后到segmentFault提问，有网友给了一个链接，据大神说：body的background起作用，而是body作为一个根结点起作用了，html标签未被激活，body但当类似于根结点的结点，其background背景色被浏览器俘获，浏览器界面背景色为background的背景色，这就是为什么上面整个窗口屏幕的颜色都是灰的。

解决办法就是给html节点添加一个背景颜色就可以，当html标签无背景样式时，body的背景色其实不是body标签的背景色，而是浏览器的。一旦html标签含有背景色，则body的背景色变成了正常的body标签（一个实实在在，普普通通标签）的背景色，而此时的html标签最顶级，背景色被浏览器获取，成为浏览器的背景色。

大神的这篇文章比较详细的介绍了原因，点击这里查看详情

即CSS这样写：

html{background-color: #fff;}body{width: 400px;height: 400px;margin: 0 auto; padding: 10px;border: 10px solid red;background-color: gray;}

这样即可达到预期的效果：

2.也是根据上面的大神的文章，页面的html,height的高度100%的原因和默认的滚动条的设置：

一个对象高度是否可以使用百分比显示，取决于对象的父级对象，#id的父级是body，而浏览器默认状态下，是没有给body一个高度属性的，因此当我们直接设置#id为height:100%;时，不会产生任何效果，而当我们给body设置了100% 之后，它的子级对象#id的height:100%;便发生作用了，这便是浏览器解析规则引发的高度自适应问题。

但是为body设置高度只是ie6下有作用。而代码中除了给body应用之外，还给HTML对象也应用相同的样式设计，这样做的好处是使IE与firefox浏览器都能够实现高度自适应，而body却不是。另外，Firefox中的 HTML标签不是100%高度，因此给两个标签都定义为height:100%;以保证两个浏览器下均能够正常显示。

页面没有填满一屏时，ie6/7会有默认的滚动条，可以通过设置html{overflow:hidden;}来隐藏掉。或者设置html{overflow:sroll;}所有浏览器显示滚动条。

3.图片自适应容器大小，这里img用到两个css样式，max-width:100%,height:auto;图片不会变形，不过当外部容器的高不够，图片会超出该容器

HTML：

<div><img src="../images/6.jpg" alt=""></div>

CSS：

div{width: 600px;height: 200px;}div img{max-width: 100%;height: auto;}

4. 背景图片，设置background-size;图片也可很好的自适应容器大小，而且可以使用background-position来定位图片的位置

HTML：

<div></div>

CSS：

div{width: 500px;height: 300px;background: url(../images/6.jpg) no-repeat center center;background-size: cover; /*background-size 一般单独写*/}

这样不论div宽高是怎么样，img背景图片都能很好的适应。

0 0