html流式布局怎么⽤,HTML5漫谈-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;
}
<1{
width:60%;
height:150px;
background:yellow;
padding-left:10%;
float:left;
}
<2{
width:20%;
padding:0 5%;
height:150px;
background:red;
float:left;
}
margin属性值可以为百分比⽂字
⽂字
---------------------------------------------------------------------------------------------------------------------------------------------------------------------
<1和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。
----------------------------------
把⼈做到宽容，把技术做到强悍。