流式布局的關(guān)鍵，是用百分比設(shè)計(jì)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的寬度設(shè)計(jì)為90%，是指其占body元素寬度的90%。
有必須要提示一點(diǎn)，在《HTML5漫談-03-盒子模型》中提到過元素的width屬性的默認(rèn)值是content盒子的寬度，元素實(shí)際占的寬度還要加上padding和border的值。
在上面代碼的基礎(chǔ)上，于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屬性來說的。很重要的一點(diǎn)是，p.no01還設(shè)置了padding-left的值為10%，這個值也是相對于父元素div的width屬性來說的！所以p.no1實(shí)際占用的寬度為70%。同理p.no2實(shí)際占有的寬度為30%。
不管是width屬性，還是padding和margin屬性，對其進(jìn)行百分比設(shè)置的時候，參照的都是父元素的width屬性的值。
min-width屬性、max-width屬性
當(dāng)寬度是百分比來指定時，通常要設(shè)置最小的寬度和最大的寬度。詳見代碼清單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。
----------------------------------
把人做到寬容，把技術(shù)做到強(qiáng)悍。