zoukankan      html  css  js  c++  java
  • 解决左边固定右边自适应宽度的方案

          上一篇文章中有提及过很多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-480px) and (max-639px) {
     13         html {
     14         font-size: 15px
     15         }
     16         }
     17         @media screen and (min-640px) and (max-719px) {
     18         html {
     19         font-size: 20px
     20         }
     21         }
     22         @media screen and (min-720px) and (max-749px) {
     23         html {
     24         font-size: 22.5px
     25         }
     26         }
     27         @media screen and (min-750px) and (max-799px) {
     28         html {
     29         font-size: 23.5px
     30         }
     31         }
     32         @media screen and (min-800px) and (max-959px) {
     33         html {
     34         font-size: 25px
     35         }
     36         }
     37         @media screen and (min-960px) and (max-1079px) {
     38         html {
     39         font-size: 30px
     40         }
     41         }
     42         @media screen and (min-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前端工程师没有很好的利用,对于该技术,大多数文章的标题是以弹性盒模型来设关键字的,所以针对例如解决左边固定右边自适应宽度的方案查找,很多同学在百度中确实很难查到弹性盒模型解决方案。

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

  • 相关阅读:
    Springboot 之 自定义配置文件及读取配置文件
    SQLSERVER系统视图 sql server系统表详细说明
    MySQL Workbench建表时 PK NN UQ BIN UN ZF AI 的含义
    使用Ecplise git commit时出现"There are no stages files"
    maven添加sqlserver的jdbc驱动包
    java将XML文档转换成json格式数据
    java将XML文档转换成json格式数据
    cannot be resolved. It is indirectly referenced from required .class files
    org.codehaus.jackson.map.JsonMappingException: Can not construct instance of java.util.Date from String value '2012-12-12 12:01:01': not a valid representation (error: Can not parse date "2012-12-
    @Autowired注解和静态方法 NoClassDefFoundError could not initialize class 静态类
  • 原文地址:https://www.cnblogs.com/xfhxbb/p/html5.html
Copyright © 2011-2022 走看看