HTML 5漫谈-04-流式布局

流式布局的关键，是用百分比设计HTML元素的with、margin和padding属性。

首先看一段HTML和CSS代码，如代码清单4-1所示。

------------------------------------------------------------------------ 代码清单 4-1 ------------------------------------------------------------------------

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

div {

width: 90%;

height: 200px;

background: blue;

margin: 0 auto;

}

</style>

</head>

<body>

</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>

<title>Document</title>

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>

</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。

----------------------------------
把人做到宽容，把技术做到强悍。

HTML 5漫谈-04-流式布局

HTML 5漫谈-04-流式布局

你可能感兴趣的:(HTML 5漫谈-04-流式布局)