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背景图片都能很好的适应。