css3的盒子模型布局

写在前面的话：

css3盒子布局，可以更简单直观的均分页面某一个div，并且还可以达到均分后的每一个元素中的内容上下居中、左右居中，但是该模型对浏览器的版本有要求：

{

display: -webkit-box; /* Firefox 30+，Chrome 4+, Safari 3.1, iOS Safari 3.2+ */

display: -moz-box; /* Firefox 17- */

display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */

display: -moz-flex; /* Firefox 18+ */

display: -ms-flexbox; /* IE 10 */

display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */

}

建议使用display: flex；因为display: -webkit-box;除了ie外都支持，但是在火狐和chrome上对该样式的解析又不一样，容易导致火狐和chrome样式混乱，并且火狐和chorme都出现盒子中的元素会改变盒子布局的长宽比，要不然就需要写两种样式display: -webkit-flex和display: -moz-flex;但这会导致写很多无意义的代码，所以也不建议使用，如果不针对低版本的ie开发，那么display: flex;无疑是更好的选择

效果1：

效果2：

代码：

<style>
        #Settings-div {
            width: 100%;
            height: 500px;/*开启盒子模型的框必须写长宽*/
            background-color: #fff;
            display: flex;/*开启盒子布局*/
            flex-flow: column;/*竖向布局，指width不变height改变*/
            /* display: -webkit-box;
            -webkit-box-orient: vertical//竖向布局*/
        }

        #Settings-header {
            width: 100%;
            height: 2.5em;/*如果不想按比例分配长宽可以自己写固定样式*/
            line-height: 2.5em;
            text-align: center;
            font-size: 1.5em;
            border-bottom: 1px solid #e5e5e5;
            background-image: -moz-linear-gradient(top,#ffffff,#f7f7f7);
        }

        #Content {
            flex: 1;
            display: flex;
            flex-flow: row;/*横向布局，如果是display: -webkit-box;则不用写布局方式，因为浏览器均默认为横向*/
        }

        #Settings-list {
            flex: 1;
            display: flex;
            height: 100%;
            flex-flow: column;
        }

        #Settings-content {
            flex: 3;
            height: 100%;
        }

        #Settings-list div {
            /*display: -webkit-box;//声明盒子模型下的所有div都按盒子模型布局
            -webkit-box-align: center;//上下居中
            -webkit-box-pack: center;//左右居中*/
            display: flex;
            justify-content: center;/*左右居中*/
            align-items: center;/*上下居中*/
        }

        .list-title {
            flex: 1;/*不单单是id可以写class也可以*/
            background-image: -moz-linear-gradient(top,#ffffff,#f7f7f7);/*页面元素背景从上到下颜色渐变，怕你们看不懂，虽然与主题无关-moz是只能火狐识别的单独样式，-webkit是chrome、Safari、Opera为主的浏览器识别的样式  */
            font-size: 1.2em;
            border-right: 1px solid #e5e5e5;
        }

        .list-content {
            flex: 1;
            background-color: #f7f7f7;
            border-top: 1px #e5e5e5 solid;
            cursor: pointer;
            border-right: 1px solid #e5e5e5;
        }

        .action {
            border-left: 5px solid #0094ff;
        }

        .select {
            background-color: #fff;
            border-right: 0px;
        }

        #Content-one {
            width: 100%;
            height: 100%;
        }

        #Content-two {
            width: 100%;
            height: 100%;
        }

        #Content-twodiv {
            width: 100%;
            height: 100%;
            display: flex;
            flex-flow: column;
        }
　　　　　/*由于没有给#Content-twodiv底下的div写布局模式，所以底下的div中的元素没用居中*/
        #Content-two1 {
            flex: 9;
            width: 100%;
            display: flex;
            flex-flow: row;
        }

        #Content-two2 {
            flex: 1;
        }

        #Content-three {
            display: none;
        }

        #form1 {
            width: 100%;
            height: 100%;
            display: -webkit-box;/*另一种要写很多无意义的代码的写法*/
            display: -moz-box;
            -webkit-box-orient: vertical;
            -moz-box-orient: vertical;
        }
　　　　　/*完全无意的浪费时间写的样式，实在是不推荐*/　
            #form1 div {
                display: -webkit-box;
                -webkit-box-pack: center;
                -webkit-box-align: center;
                display: -moz-box;
                -moz-box-align: center;
                -moz-box-pack: center;
            }

        #form1-header {
            width: 100%;
            height: 50px;
            font-size: 1.3em;
            border-bottom: 1px solid #e5e5e5;
        }

        #table {
            width: 100%;
            table-layout: auto;
            margin-top: 10px;
        }

            #table td {
                width: 50%;
                height: 40px;
                line-height: 40px;
            }

        .table-left {
            text-align: right;
            padding-right: 20px;
        }

        .table-right {
            padding-left: 20px;
        }

        #save1 {
            background-color: #aa56ff;
            color: #ffffff;
            width: 80px;
            height: 35px;
            border: 0px;
            box-shadow: 2px 4px 6px #000;
            cursor: pointer;
        }

        #save2 {
            background-color: #aa56ff;
            color: #ffffff;
            width: 80px;
            height: 35px;
            border: 0px;
            box-shadow: 2px 4px 6px #000;
            cursor: pointer;
        }

        #age {
            width: 25px;
            border-color: #d8d8d8 #e5e5e5 #e5e5e5 #d8d8d8;
            border-style: solid;
            border-width: 1px;
        }

        .table-right select {
            width: 100px;
            height: 30px;
            border-color: #d8d8d8 #e5e5e5 #e5e5e5 #d8d8d8;
            border-style: solid;
            border-width: 1px;
        }
    </style>
<div id="Settings-div">
    <div id="Settings-header">
        <span>个人设置</span>
    </div>
    <div id="Content">
        <div id="Settings-list">
            <div class="list-title action">
                <img src="~/images/user.png" />
                <span>个人资料</span>
            </div>
            <div class="list-content select" data-leve="1">
                <span>基本资料</span>
            </div>
            <div class="list-content" data-leve="2" style="border-bottom:1px #e5e5e5 solid ;">
                <span>头像设置</span>
            </div>
            <div class="list-title">
                <img src="~/images/mi.png" />
                <span>隐私设置</span>
            </div>
            <div class="list-content" style="border-top:1px #e5e5e5 solid ;" data-leve="3">
                <span>修改密码</span>
            </div>
        </div>
        <div id="Settings-content">
            <div id="Content-one" class="content">
                <form id="form1">
                    <div id="form1-header">
                        <span>基本资料</span>
                    </div>
                    <table id="table">
                        <tr>
                            <td class="table-left">性别:</td>
                            <td class="table-right">
                                <input type="radio" name="sex" value="男" checked />男
                                <input type="radio" name="sex" value="女" />女
                            </td>
                        </tr>
                        <tr>
                            <td class="table-left">年龄:</td>
                            <td class="table-right"><input type="text" name="age" id="age" value="" />岁</td>
                        </tr>
                        <tr>
                            <td class="table-left">居住地:</td>
                            <td class="table-right">
                                <select>
                                    <option value="0">请选择</option>
                                </select>
                                <select>
                                    <option value="0">请选择</option>
                                </select>
                            </td>
                        </tr>
                    </table>
                    <div>
                        <input type="button" id="save1" value="保存" />
                    </div>
                </form>
            </div>
            <div id="Content-two" class="content" style="display:none;">
                <div id="Content-twodiv">
                    <div id="Content-two1">
                        <div style="flex:2;background-color:#e2e2e2;">

                        </div>
                        <div style="width:290px;"></div>
                    </div>
                    <div id="Content-two2">
                        <form id="upload-imgs" action="/FileUpload/FileImages" method="post" enctype="multipart/form-data">
                            <input type="button" value="上传图片" style="" />
                            <input type="file" name="img" value="" style="opacity:0; margin-left:-80px;width:80px;cursor:pointer;" onchange="uploadFile(this)" />
                        </form>
                    </div>
                </div>
            </div>
            <div id="Content-three" class="content" style="display:none;">

            </div>
        </div>
    </div>

</div>