CSS背景图片布局
<!doctype html>
<html>
<body>
...Your content goes here...
</body>
</html>
给body标签指定背景图，这样背景图就可以填充整个浏览器viewport了。
其实，该方案对所有的块级容器都可以生效。块级容器的宽高是动态的，那么背景图将自动伸缩，充满整个容器。
CSS body标签的样式如下：
body {
/* 加载背景图 */
background-image: url(images/background-photo.jpg);
/* 背景图垂直、水平均居中 */
background-position: center center;
/* 背景图不平铺 */
background-repeat: no-repeat;
/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
background-attachment: fixed;
/* 让背景图基于容器大小伸缩 */
background-size: cover;
/* 设置背景颜色，背景图加载过程中会显示背景色 */
background-color: #464646;
}
上面最重要的一条就是：
background-size: cover;
这样浏览器就会按比例缩放背景图直至背景图宽高不小于容器的宽高（在上面的例子中，就是body标签）。
这里需要注意的一点就是：如果背景图小于body标签的尺寸（例如在高分辨率显示器上，或页面内容特别多时），浏览器会拉伸图片。都知道，当把一个图片拉伸时，图片会变模糊。
因此，在选择背景图时，要特别注意尺寸。为了照顾到大尺寸屏幕，demo里用的图片尺寸为5498px * 3615px 。
同时，为了让背景图始终相对于viewport居中，声明了：
background-position: center center;
上面的规则会把背景图缩放的原点定位到viewport的中心。
接下来需要解决的问题是：当内容的高度大于viewport的高度时，会出现滚动条。希望背景图始终相对于viewport固定，即使用户滚动时也是一样。
解决办法就是：
background-attachment: fixed;
HTML 中块级元素设置 height:100% 的实现
当你设置一个页面元素的高度(height)为100%时，期望这样元素能撑满整个浏览器窗口的高度，但大多数情况下，这样的做法没有任何效果。
为什么height:100%不起作用呢？
按常理，当我们用CSS的height属性定义一个元素的高度时，这个元素应该按照设定在浏览器的纵向空间里扩展相应的空间距离。例如，如果一个div元素的CSS是height: 100px;，那它应该在页面的竖向空间里占满100px的高度。
而跟W3C的规范，百分比的高度在设定时需要根据这个元素的父元素容器的高度。所以，如果你把一个div的高度设定为height: 50%;，而它的父元素的高度是100px，那么，这个div的高度应该是50px。当设计一个页面时，你在里面放置了一个div元素，你希望它占满整个窗口高度，最自然的做法，你会给这个div添加height: 100%;的css属性。然而，如果你要是设置宽度为width: 100%;，那这个元素的宽度会立刻扩展到窗口的整个横向宽度。高度也会这样吗？
错。
为了理解为什么不会，你需要理解浏览器是如何计算高度和宽度的。Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值，那浏览器会自动将页面内容平铺填满整个横向宽度。
但是高度的计算方式完全不一样。事实上，浏览器根本就不计算内容的高度，除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度。否则，浏览器就会简单的让内容往下堆砌，页面的高度根本就无需考虑。因为页面并没有缺省的高度值，所以，当你让一个元素的高度设定为百分比高度时，无法根据获取父元素的高度，也就无法计算自己的高度。换句话说，父元素的高度只是一个缺省值：height: auto;。当你要求浏览器根据这样一个缺省值来计算百分比高度时，只能得到undefined的结果。也就是一个null值，浏览器不会对这个值有任何的反应。
父元素没有设定固定高度，于是子元素的高度height: 100% 也不会起作用。
那么，如果想让一个元素的百分比高度height: 100%;起作用，你需要给这个元素的所有父元素的高度设定一个有效值。换句话说，你需要这样做：
<html>
<body>
<div style="height: 100%;">
<p>
想让这个div高度为 100% 。
</p>
</div>
</body>
</html>
现在你给了这个div的高度为100%，它有两个父元素<body>和<html>。为了让你的div的百分比高度能起作用，你必须设定<body>和<html>的高度 ！！！
现在你给了这个div的高度为100%，它有两个父元素<body>和<html>。为了让你的div的百分比高度能起作用，你必须设定<body>和<html>的高度 ！！！
现在你给了这个div的高度为100%，它有两个父元素<body>和<html>。为了让你的div的百分比高度能起作用，你必须设定<body>和<html>的高度 ！！！
<html style="height: 100%;">
<body style="height: 100%;">
<div style="height: 100%;">
<p>
这样这个div的高度就会100%了
</p>
</div>
</body>
</html>
从这个 height: 100% 就起作用了。
在使用height: 100%;时需要注意的一些事项:
1、margin 和 padding 会让你的页面出现滚动条，也许这是你不希望的。
2、如果你的元素实际高度大于你设定的百分比高度，那元素的高度会自动扩展。
Float、Position、Flexbox实现的布局
如下图所示
<div style="width: 100%;height: 75px;"> <div style="float: left;width: 30%;height: inherit; <!--float：left；width：30%--> <!--<br> 父div固定了width: 100%;height: 75px;--> </div> <div style="float: left;width: 70%;height: inherit; <!--..float：left；width：70%--> </div> </div>
2、实现一个两栏布局，左侧固定宽度，右侧根据浏览器宽度进行自适应变化 （float+margin）
左侧：width=30%,height=75px；float= left
右侧：margin-right: 0px;margin-left: 30%;height: inherit
右侧通过定义margin外边框的与左边距离，与右边的距离，自适应变化
代码如下
<div style="width: 100%;height: 75px;"> <div style="width: 30%;height: inherit;float: left"> <!--左侧 width:30%;float:left;--> </div> <div style="margin-right: 0px;margin-left: 30%;height: inherit"> <!--右侧没有用float语句，用了 margin-right: 0px;margin-left: 30%;(实现自适应)--> </div> </div>
3、实现一个两栏布局，右侧固定宽度，左侧根据浏览器宽度进行自适应变化 （position）
( 设置了position:absolute要结合right,left,top,bottom使用 )
效果图如下：
最外层的div，即父div要position:relative，这样子div会在父div的范围内定位。子div要设置position:absolute
父div：width=100%；height=75px；position=relative
子div：
左侧div：height: inherit;position: absolute;right: 30%;top: 0px ;left: 0px;
右侧div：width: 30%;height: inherit;position: absolute;right: 0px;top: 0px;
代码如下
<div style="width: 100%;height: 75px;position: relative"> <div style="height: inherit;position: absolute;right: 30%; top: 0px;left:0px;border: rgba(235,86,168,0.6) 2px solid"> <!--左侧自适应浏览器宽度position: absolute;right: 30%; top: 0px;left:0px;，<br>--> <!--父div必须为position:relative；这样子div，即左侧与右侧的div会在父div内定为--> </div> <div style="width: 30%;height: inherit;position: absolute;right: 0px;top: 0px;border: black 1px double"> <!--右侧固定为width: 30%;height: inherit;--> </div> </div>
4、实现一个三栏布局，左侧固定宽度，右侧固定宽度，中间部分宽度随浏览器宽度变化而自适应变
(float+position+margin)
效果图
代码如下
<style>
#left,#right,#middle{
display: inline-block;/*行内块元素*/
height: 75px;
position: absolute;
top: 0px;
}
#left{
width: 30%;
margin-left: 0px;
left: 0px;
background-color: #00ee00;
}
#middle{
background-color: rgba(17,235,137,0.6);
left: 30%;
right: 30%;
}
#right{
width: 30%;
right: 0%;
background-color: rgba(140,60,235,0.6);
margin-right: 0px;
}
</style>
5、实现一个三栏布局，左侧固定宽度，中间固定宽度，右侧根据浏览器宽度变化而自适应变化 ( flexBox )
效果图：
父元素要使用display:flex ; flex-direction：row | column | row-reverse | column-reverse
代码如下:
<style>
#fartherBox{
width: 100%;
height: 75px;
display: flex;
flex-direction: row;/*它默认值是 row，这使得它们在按你浏览器的默认语言方向排成一排*/
}
.left{
background-color: rgba(203,74,43,0.6);
width: 30%;
height: inherit;
-webkit-box-flex: 2.0;
-moz-box-flex: 2.0;
}
.middle{
background-color: rgba(132,135,235,0.6);
width: 30%;
height: inherit;
-webkit-box-flex: 1.0;
-moz-box-flex: 1.0;
}
.right{
background-color: rgba(20,10,3,0.6);
height: inherit;
flex: auto;/*动态尺寸*/
}
</style>