html流式布局怎么用,HTML 5漫谈-04-流式布局

HTML 5漫谈-04-流式布局

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

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

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

流式布局Document

div{

width:90%;

height:200px;

background:blue;

margin:0 auto;

}

}

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

元素的相对宽度的参照物是其父元素。代码中div元素的父元素是body，所以CSS中对div的宽度设计为90%，是指其占body元素宽度的90%。有必须要提示一点，在《HTML5漫谈-03-盒子模型》中提到过元素的width属性的默认值是content盒子的宽度，元素实际占的宽度还要加上padding和border的值。

在上面代码的基础上，于div元素中增加两个p元素，如果代码清单4-2所示。

------------------------------------------------------------------------ 代码清单 4-2------------------------------------------------------------------------

流式布局Document

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;

}

文字

文字

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

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。

----------------------------------

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