书写手机网页时，必须约束视口宽度（320-420左右）：
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" id="viewport" />
width=device-width 约束视口
initial-scale=1.0 初始视口倍数是1倍
minimum-scale=1.0 最小允许视口宽度是1倍
maximum-scale=1.0 最大允许视口宽度是1倍
user-scalable=no 不允许用户缩放视口
书写移动端网页，没有版心，必须用百分比布局。百分比布局也叫流式布局。
一、百分比布局
width:宽度的百分比是相对于父盒子width内容宽的比。没有父盒子就是相对于浏览器的宽。
height:高度的百分比是相对于父盒子height内容高的比。
padding,margin.:padding和margin不管任何方向百分比都是相对于父盒子width内容宽的比。
border：不能书写百分数
子盒子如果绝对定位，width百分比参考的是距离最近，且有定位的父盒子的width（算上padding.）；
height百分比参考的是距离最近，且有定位的父盒子的height（算上padding.）；
padding,margin百分比参考的是距离最近，且有定位的父盒子的width（算上padding.）；
例：
div{ width: 50%; overflow: hidden; } p{ width: 50%; height: 100px; float: left; background-color: pink; } p:last-child{ background-color: green; }
二、box-sizing:border-box;
css2中的盒模型是外扩的。
css3的box-sizing：盒模型内减。（在width、height基础上再书写padding或者border，是在原有宽高上进行内减。）
例：
div{
width: 500px;
overflow: hidden;
}
p{
width: 50%;
height: 100px;
float: left;
background-color: pink;
box-sizing:border-box;
border: 5px solid #000;
}
内减盒模型：书写的width、height就是盒子真正占有的宽和高。
讲真，内减盒模型简直不能再更好用了！！尤其是要自己各种测算的时候！
三、弹性盒
display的属性值：block ,inline,inline-block,none;
-webkit-box:弹性盒容器。
例：
书写：3个P，宽度比是1:2:3。（X+2X+3X=100%）
div{
width: 600px;
height: 100px;
/*父盒子是弹性盒容器*/
display: -webkit-box;
}
p{
-webkit-box-flex:1;
height: 100px;
background-color: pink;
}
p:nth-child(2){
-webkit-box-flex:2;
height: 100px;
background-color: green;
}
p:nth-child(3){
-webkit-box-flex:3;
height: 100px;
background-color: pink;
}
抽象公式：
<div class="box"> //display：-webkit-box；子盒子不设置浮动，浏览器可以让他们自动并排显示
<p></p> //box-flex:1；不设置浮动，不设置宽度
<p></p> //box-flex2；:不设置浮动，不设置宽度
<p></p> //box-flex:3；不设置浮动，不设置宽度
</div>
四、固比固模型
固比固模型：第一部分和第三部分宽度是固定值，第二部分宽度是剩余部分的宽度。
例：1和3部分宽度是120px，2自动撑开。
1、利用浮动
<div class="box">
<p class="no1">1</p> //浮动，width：120px
<p class="no2">2</p> //浮动，width：calc(100% - 240px)
<p class="no3">3</p> //浮动，width：120px
</div>
2、绝对定位（推荐）
<div class="box"> //相对定位
<p class="no1">1</p> //绝对定位，width：120px
<p class="no2">2</p> //标准流，width:100%; padding：0 120px;box-sizing:border-box;
<p class="no3">3</p> //绝对定位，width：120px
</div>
3、弹性盒
<div class="box"> //display:-webkit-box;弹性盒容器，弹性盒会并排显示，不用设置浮动。
<p class="no1">1</p> //width:120px;不要写浮动
<p class="no2">2</p> //-webkit-box-flex:3333;表示自己独分父亲。（其值可以是随便一个数字）
<p class="no3">3</p> //width:120px;不要写浮动
</div>
五、max-width 和 min-width
移动端网页宽度必须使用百分比，但是网页的最小宽度或者是最大宽度只能书写像素px。不能用百分数。
例：
.box{
width: 80%;
height:100px;
background-color: orange;
margin:0 auto;
max-width:600px;
min-width:350px;
}
