解决左边固定右边自适应宽度的方案

      上一篇文章中有提及过很多web前端开发者用float+margin+position:absolute来实现表单内容的左边文字固定右边的输入框自适应宽度的问题，当然，这个问题我也在百度中搜索过，基本搜索出来的答案都是这样描述的，我也在上一篇文章中提出过浮动和绝对定位属于脱离文档流布局，是会损耗性能的，但是百度中却没有给出我所想表达出的解决方案，所以不得不在此将该方案具体的描述清楚。

      首先，我需要介绍的是display:box这个属性，它是今天弹性布局的主角，虽然它有个更加强大的弟弟display:flex，但是由于手机浏览器的兼容性问题，现在任然不太提倡使用这个属性，当然，如果你的项目只运行环境在高版本浏览器中，用flex会更加理想，有时间的博友可以好好关注这个属性。

      言归正传，display:box俗称弹性盒模型，早在2011年的时候其实就在移动端保持着良好的兼容性了，它有如下几个特性：      

      box-orient（用于设置盒模型内部元素的排列方式）

  1. inline-axis：从左向右排列（默认值）
  2. horizontal：水平排列
  3. vertical：垂直排列
  4. block-axis：从上向下排列

      box-pack （用于设置子容器在水平框中的水平位置，以及垂直框中的垂直位置）

  1. start ：所有子容器都分布在父容器的左侧，右侧留空
  2. end ：所有子容器都分布在父容器的右侧，左侧留空
  3. justify ：所有子容器平均分布（默认值）
  4. center ：平均分配父容器剩余的空间（全局居中的效果）

      box-align （用于规定如何对齐框的子元素）

  1. start ：子容器从父容器顶部开始排列
  2. end ：子容器从父容器底部开始排列
  3. center ：子容器横向居中
  4. baseline ：所有子容器沿同一基线排列
  5. stretch ：所有子容器和父容器保持同一高度（默认值）

     box-flex（指定box的子元素是否灵活或固定的大小，使用数字进行比例分配）

     介绍完box属性后我们开始在项目中实践：

     首先介绍几个坑：

     1、可参与box-flex比例分配的元素必须为display:block。

     2、内联元素会占用box内空间但是不参与剩余空间分配。

好了，我们开始设计一个简单的html结构表单：

     

 1 <!DOCTYPE HTML>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
 6         <meta content="yes" name="apple-mobile-web-app-capable">
 7         <meta content="black" name="apple-mobile-web-app-status-bar-style">
 8         <meta content="telephone=no" name="format-detection">
 9         <meta content="email=no" name="format-detection">
10         <title>demo</title>
11     </head>
12     <body>
13         <div class="view">
14             <div class="main">
15                 <form class="formMain" action="" method="post">
16                     <ul>
17                         <li>
18                             <label for="vender">商家:</label>
19                             <input type="text" name="vender">
20                         </li>
21                         <li>
22                             <label for="name">姓名:</label>
23                             <input type="text" name="name">
24                         </li>
25                         <li>
26                             <label for="number">手机:</label>
27                             <input type="text" name="number">
28                         </li>
29                         <li>
30                             <button class="submit" type="submit">提交</button>
31                         </li>
32                     </ul>
33                 </form>
34             </div>
35         </div>
36     </body>
37 </html>

 

随后进行css样式设计：

  1 html,body{
  2         margin:0 auto;
  3         width:100%;
  4         height:100%;
  5         background-color:rgb(40,48,54);
  6         color:white;
  7         overflow: hidden;
  8         overflow-y: scroll;
  9         -webkit-user-select: none;
 10         }
 11         div{
 12         margin:0 auto;
 13         }
 14         p{
 15         margin:0;
 16         padding:0;
 17         }
 18         .view{
 19         height:100%;
 20         /* Safari, Opera, and Chrome */
 21         display:-webkit-box;
 22         -webkit-box-orient:vertical;
 23         -webkit-box-pack:center;
 24         -webkit-box-align:center;
 25         
 26         /* W3C */
 27         display:box;
 28         box-orient:vertical;
 29         box-pack:center;
 30         box-align:center;
 31         }
 32         .formMain{
 33         height:100%;
 34         }
 35         .main{
 36         width:100%;
 37         height:70%;
 38         }
 39         .main ul {
 40         width:100%;
 41         height:100%;
 42         list-style-type:none;
 43         list-style-position:outside;
 44         margin:0px;
 45         padding:0px;
 46         }
 47         .main li{
 48         height:4rem;
 49         margin: .8rem;
 50         padding:0;
 51         position:relative;
 52         /* Safari, Opera, and Chrome */
 53         display:-webkit-box;
 54         -webkit-box-orient:horizontal;
 55         -webkit-box-pack:center;
 56         -webkit-box-align:center;
 57         
 58         /* W3C */
 59         display:box;
 60         box-orient:horizontal;
 61         box-pack:center;
 62         box-align:center;
 63         }
 64         .main label {
 65         margin:0;
 66         padding:3px;
 67         display:inline-block;
 68         font-size:1.8rem;
 69         }
 70         .main input[type="text"] {
 71         margin: 0 5px;
 72         padding:0;
 73         display: block;
 74         -webkit-box-flex: 1.0;
 75         box-flex: 1.0;
 76         background-color: #1F272D;
 77         font-size:1.8rem;
 78         height: 3.4rem;
 79         border-style: solid;
 80         border-width: 0 1px 1px;
 81         border-color: rgba(196, 196, 196, 0.18);
 82         box-shadow: 0 1px 1px rgba(9, 9, 9, 0.17) inset;
 83         border-radius: .3em;
 84         box-sizing: border-box;
 85         color:#fff;
 86         }
 87         .main input:focus{
 88         background: #fff;
 89         border-color:#28921f;
 90         color:#000;
 91         }
 92         .main button{
 93         margin:0 5px;
 94         padding:0;
 95         border-style: solid;
 96         border-width: 0 1px 1px;
 97         border-color: #5cd053;
 98         border-radius:.3em;
 99         height: 3.4rem;
100         display:block;
101         -webkit-box-flex:1.0;
102         box-flex:1.0;
103         font-size:1.8rem;
104         background-color: rgba(90, 180, 105, 0.88);;
105         color:#fff;
106         }
107         .main button.submit:active {
108         border: 1px solid #20911e;
109         -webkit-box-shadow:0 0 10px 5px #356b0b inset ;
110         box-shadow: 0 0 10px 5px #356b0b inset;
111         }

为了在移动端中表现的极致，我们还需要增加一些响应式的样式以及一些默认样式的处理，加工后的完整代码如下：

  1 <!DOCTYPE HTML>
  2 <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
  6         <meta content="yes" name="apple-mobile-web-app-capable">
  7         <meta content="black" name="apple-mobile-web-app-status-bar-style">
  8         <meta content="telephone=no" name="format-detection">
  9         <meta content="email=no" name="format-detection">
 10         <title>demo</title>
 11         <style> html {font-size:10px}        
 12         @media screen and (min-width:480px) and (max-width:639px) {
 13         html {
 14         font-size: 15px
 15         }
 16         }
 17         @media screen and (min-width:640px) and (max-width:719px) {
 18         html {
 19         font-size: 20px
 20         }
 21         }
 22         @media screen and (min-width:720px) and (max-width:749px) {
 23         html {
 24         font-size: 22.5px
 25         }
 26         }
 27         @media screen and (min-width:750px) and (max-width:799px) {
 28         html {
 29         font-size: 23.5px
 30         }
 31         }
 32         @media screen and (min-width:800px) and (max-width:959px) {
 33         html {
 34         font-size: 25px
 35         }
 36         }
 37         @media screen and (min-width:960px) and (max-width:1079px) {
 38         html {
 39         font-size: 30px
 40         }
 41         }
 42         @media screen and (min-width:1080px) {
 43         html {
 44         font-size: 32px
 45         }
 46         }
 47         *{-webkit-appearance: none;-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-touch-callout: none;}
 48         *:focus {outline: none;}
 49         input{ outline:none;}
 50         html,body{
 51         margin:0 auto;
 52         width:100%;
 53         height:100%;
 54         background-color:rgb(40,48,54);
 55         color:white;
 56         overflow: hidden;
 57         overflow-y: scroll;
 58         -webkit-user-select: none;
 59         }
 60         div{
 61         margin:0 auto;
 62         }
 63         p{
 64         margin:0;
 65         padding:0;
 66         }
 67         .view{
 68         height:100%;
 69         /* Safari, Opera, and Chrome */
 70         display:-webkit-box;
 71         -webkit-box-orient:vertical;
 72         -webkit-box-pack:center;
 73         -webkit-box-align:center;
 74         
 75         /* W3C */
 76         display:box;
 77         box-orient:vertical;
 78         box-pack:center;
 79         box-align:center;
 80         }
 81         .formMain{
 82         height:100%;
 83         }
 84         .main{
 85         width:100%;
 86         height:70%;
 87         }
 88         .main ul {
 89         width:100%;
 90         height:100%;
 91         list-style-type:none;
 92         list-style-position:outside;
 93         margin:0px;
 94         padding:0px;
 95         }
 96         .main li{
 97         height:4rem;
 98         margin: .8rem;
 99         padding:0;
100         position:relative;
101         /* Safari, Opera, and Chrome */
102         display:-webkit-box;
103         -webkit-box-orient:horizontal;
104         -webkit-box-pack:center;
105         -webkit-box-align:center;
106         
107         /* W3C */
108         display:box;
109         box-orient:horizontal;
110         box-pack:center;
111         box-align:center;
112         }
113         .main label {
114         margin:0;
115         padding:3px;
116         display:inline-block;
117         font-size:1.8rem;
118         }
119         .main input[type="text"] {
120         margin: 0 5px;
121         padding:0;
122         display: block;
123         -webkit-box-flex: 1.0;
124         box-flex: 1.0;
125         background-color: #1F272D;
126         font-size:1.8rem;
127         height: 3.4rem;
128         border-style: solid;
129         border-width: 0 1px 1px;
130         border-color: rgba(196, 196, 196, 0.18);
131         box-shadow: 0 1px 1px rgba(9, 9, 9, 0.17) inset;
132         border-radius: .3em;
133         box-sizing: border-box;
134         color:#fff;
135         }
136         .main input:focus{
137         background: #fff;
138         border-color:#28921f;
139         color:#000;
140         }
141         .main button{
142         margin:0 5px;
143         padding:0;
144         border-style: solid;
145         border-width: 0 1px 1px;
146         border-color: #5cd053;
147         border-radius:.3em;
148         height: 3.4rem;
149         display:block;
150         -webkit-box-flex:1.0;
151         box-flex:1.0;
152         font-size:1.8rem;
153         background-color: rgba(90, 180, 105, 0.88);;
154         color:#fff;
155         }
156         .main button.submit:active {
157         border: 1px solid #20911e;
158         -webkit-box-shadow:0 0 10px 5px #356b0b inset ;
159         box-shadow: 0 0 10px 5px #356b0b inset;
160         }
161         </style>
162     </head>
163     <body>
164         <div class="view">
165             <div class="main">
166                 <form class="formMain" action="" method="post">
167                     <ul>
168                         <li>
169                             <label for="vender">商家:</label>
170                             <input type="text" name="vender">
171                         </li>
172                         <li>
173                             <label for="name">姓名:</label>
174                             <input type="text" name="name">
175                         </li>
176                         <li>
177                             <label for="number">手机:</label>
178                             <input type="text" name="number">
179                         </li>
180                         <li>
181                             <button class="submit" type="submit">提交</button>
182                         </li>
183                     </ul>
184                 </form>
185             </div>
186         </div>
187     </body>
188 </html>

到此为止，一个可随浏览器宽度自由伸缩的弹性布局的简单表单就设计完成，大家可以在浏览器中查看，右边的输入框是自适应宽度的，既不需要脱离文档流，又可以自适应任何分辨率的手机屏幕。

当我写完这篇文章后，我要特别声明一下，该弹性布局的技术早在几年前就已经很好的实现了，园子中一定存在不少相关文章，所以我并不想作为一个多么牛的技术来发表，只是确实弹性布局很多web前端工程师没有很好的利用，对于该技术，大多数文章的标题是以弹性盒模型来设关键字的，所以针对例如解决左边固定右边自适应宽度的方案查找，很多同学在百度中确实很难查到弹性盒模型解决方案。

最后，祝愿大家都能学习与分享更多宝贵的前端知识，我们一起努力！

 

posted @ 2015-07-20 02:03  ppk2  阅读(1913)  评论(5)  编辑  收藏  举报