zoukankan      html  css  js  c++  java
  • 第125天:移动端-空白字符问题解决办法

    1、当我们想使用百分比来进行两个盒子的并排

    代码:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4   <meta charset="utf-8">
     5   <style>
     6     html,
     7     body {
     8       margin: 0;
     9       padding: 0;
    10     }
    11 
    12     .container {
    13       width: 1024px;
    14       height: 2000px;
    15       margin: 0 auto;
    16     }
    17 
    18     .container > div {
    19       display: inline-block;
    20     }
    21 
    22     .left {
    23       width: 80%;
    24       height: 100%;
    25       background-color: #ff0;
    26     }
    27 
    28     .right {
    29       width: 20%;
    30       height: 100%;
    31       background-color: #00f;
    32     }
    33   </style>
    34 </head>
    35 
    36 <body>
    37   <div class="container">
    38     <div class="left"></div>
    39     <div class="right"></div>
    40   </div>
    41 </body>
    42 </html>

        当我们想通过inline-block让两个div来并排,一个战父盒子的80%,一个占20%。可能看起来刚好100%,但是会由于代码中左右两个盒子之间的空白字符会导致右边的盒子掉下来。

    2、解决办法

      (1)消除空白字符

        让左右两个盒子的代码紧密连起来,就是不要让他们中间有空白字符

      (2)给父盒子添加属性font-size:0;来消除空白字符,推荐使用此方法

    3、字母间距和单词间距

      字母间距——letter-spacing

      单词间距——word-spacing

  • 相关阅读:
    西门子SCL读写DB数据
    LeetCode8.字符串转换整数(atoi) JavaScript
    LeetCode8.字符串转换整数(atoi) JavaScript
    WebRequestSugar
    iosblock用法
    datasci
    UINavigationController学习笔记
    iOSTab bar
    自定义tab bar控件 学习资料
    Ios tab Bar 使用方法
  • 原文地址:https://www.cnblogs.com/le220/p/8111664.html
Copyright © 2011-2022 走看看