HTML 5漫谈-04-流式布局

流式布局的关键,是用百分比设计HTML元素的withmarginpadding属性。

首先看一段HTMLCSS代码,如代码清单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盒子的宽度,元素实际占的宽度还要加上paddingborder的值。

在上面代码的基础上,于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.no1p.no2width属性值分别是60%20%,是指相对它们父元素divwidth属性来说的。很重要的一点是,p.no01还设置了padding-left的值为10%,这个值也是相对于父元素divwidth属性来说的!所以p.no1实际占用的宽度为70%。同理p.no2实际占有的宽度为30%

不管是width属性,还是paddingmargin属性,对其进行百分比设置的时候,参照的都是父元素的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



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

posted on 2017-01-04 14:33 OldBoy 阅读(24) 评论(0)  编辑  收藏 所属分类: HTML5


只有注册用户登录后才能发表评论。


网站导航:
 
<2017年1月>
25262728293031
1234567
891011121314
15161718192021
22232425262728
2930311234

导航

统计

常用链接

留言簿(1)

随笔分类

随笔档案

文章分类

文章档案

相册

搜索

最新评论

阅读排行榜

评论排行榜