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

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

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

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

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

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

         .list-content {
             flex: ;
             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: %;
             height: %;
         }

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

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

         #Content-two2 {
             flex: ;
         }

         #Content-three {
             display: none;
         }

         #form1 {
             width: %;
             height: %;
             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: %;
             height: 50px;
             font-size: .3em;
             border-bottom: 1px solid #e5e5e5;
         }

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

             #table td {
                 width: %;
                 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 #;
             cursor: pointer;
         }

         #save2 {
             background-color: #aa56ff;
             color: #ffffff;
             width: 80px;
             height: 35px;
             border: 0px;
             box-shadow: 2px 4px 6px #;
             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="">
                 <span>基本资料</span>
             </div>
             <div class="list-content" data-leve="" 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="">
                 <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="">请选择</option>
                                 </select>
                                 <select>
                                     <option value="">请选择</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>