1、简介
即屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。【这就导致如果屏幕太大或者太小都会导致元素无法正常显示】，元素的宽度使用百分比，高度不会改变。在写死的情况下。当屏幕的分辨率太大，或太小，元素会在宽度方向被拉长或压缩，不是等比变化
2、效果图，如下：
20190809_115137.gif
3、图一采用的是父级元素宽度使用百分比，子元素使用flex布局，flex:1指的是4个子元素在父级元素中，各自占一份，类似于所谓的栅格，不用指定子元素的宽度。
.di,.di1,.di2,.di3 {
flex:1;
background-color: blue;
}
4、图二所使用的是float布局并固定子元素的宽，该布局下，当屏幕分辨率的宽度无法容纳下子元素指定宽的总和时，子元素会自动换行。
5、图三使用的是父级和子元素宽均为百分比。
6、css代码
.div1,.div2,.div3 {
width:80%;
margin:auto;
background-color:#ccc;
}
.div1 {
display:flex;
}
.div1,.div3 {
height:100px;
}
.div2,.div3 {
display:float;
margin-top:5px;
}
.div2 {
overflow: hidden;
}
.di,.di1,.di2,.di3 {
flex:1;
background-color: blue;
}
.di1,.di3 {
background-color: green;
}
.do,.do1,.do2,.do3 {
background-color:blue;
float:left;
width:343px;
height:50px;
}
.do1,.do3 {
background-color:green;
}
.dt,.dt1,.dt2,.dt3 {
background-color:blue;
float:left;
width:25%;
height:50px;
}
.dt1,.dt3 {
background-color:green;
}
7、html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href='../css/flow.css' rel='stylesheet'></link>
</head>
<body>
<p>里边的小盒子使用flex</p>
<div class="div1">
<!-- 里边的小盒子都是用固定的宽高+flex -->
<div class="di"></div>
<div class="di1"></div>
<div class="di2"></div>
<div class="di3"></div>
</div>
<p>里边的小盒子都是用固定的宽高+float</p>
<div class="div2">
<!-- 里边的盒子使用固定的宽度+float -->
<div class="do"></div>
<div class="do1"></div>
<div class="do2"></div>
<div class="do3"></div>
</div>
<div><p>里边的小盒子仍然使用百分比</p></div>
<div class="div3">
<!-- 里边的盒子使用固定的宽度+float -->
<div class="dt"></div>
<div class="dt1"></div>
<div class="dt2"></div>
<div class="dt3"></div>
</div>
</body>
</html>
网友评论