流式布局的关键，是用百分比设计HTML元素的with、margin和padding属性。
首先看一段HTML和CSS代码，如代码清单4-1所示。
------------------------------------------------------------------------ 代码清单 4-1 ------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>流式布局</title>
<title>Document</title>
<style type="text/css">
div {
width: 90%;
height: 200px;
background: blue;
margin: 0 auto;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
---------------------------------------------------------------------------------------------------------------------------------------------------------------------
元素的相对宽度的参照物是其父元素。代码中div元素的父元素是body，所以CSS中对div的宽度设计为90%，是指其占body元素宽度的90%。
有必须要提示一点，在《HTML5漫谈-03-盒子模型》中提到过元素的width属性的默认值是content盒子的宽度，元素实际占的宽度还要加上padding和border的值。
在上面代码的基础上，于div元素中增加两个p元素，如果代码清单4-2所示。
------------------------------------------------------------------------ 代码清单 4-2 ------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>流式布局</title>
<title>Document</title>
<style type="text/css">
div {
width: 90%;
height: 200px;
background: blue;
margin: 0 auto;
}
p.no1 {
width: 60%;
height: 150px;
background: yellow;
padding-left: 10%;
float: left;
}
p.no2 {
width: 20%;
padding: 0 5%;
height: 150px;
background: red;
float: left;
}
</style>
</head>
<body>
<div>
<p class="no1">文字</p>
<p class="no2">文字</p>
</div>
</body>
</html>
---------------------------------------------------------------------------------------------------------------------------------------------------------------------
p.no1和p.no2的width属性值分别是60%和20%，是指相对它们父元素div的width属性来说的。很重要的一点是，p.no01还设置了padding-left的值为10%，这个值也是相对于父元素div的width属性来说的！所以p.no1实际占用的宽度为70%。同理p.no2实际占有的宽度为30%。
不管是width属性，还是padding和margin属性，对其进行百分比设置的时候，参照的都是父元素的width属性的值。
min-width属性、max-width属性
当宽度是百分比来指定时，通常要设置最小的宽度和最大的宽度。详见代码清单4-3所示。
------------------------------------------------------------------------ 代码清单 4-3 ------------------------------------------------------------------------
div {
width: 90%;
height: 200px;
background: blue;
margin: 0 auto;
max-width: 1215px;
min-width: 400px;
}
---------------------------------------------------------------------------------------------------------------------------------------------------------------------
div的宽度是body宽度的90%，但是最大不会超过1215px，最小不会小于400px。
----------------------------------
把人做到宽容，把技术做到强悍。