css布局-百分比布局

书写手机网页时，必须约束视口宽度（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; }

clipboard.png

二、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;
}

css布局-百分比布局

推荐阅读更多精彩内容