CSS深入浅出（2）-高度、缝隙and导航

作者: 如梦初醒Tel | 来源:发表于2019-03-14 17:22 被阅读33次

CSS深入浅出（2）-高度、缝隙and导航
前端(塌陷)
项目中优秀js代码
前端（05）
iOS开发小技巧及小知识点（三）
CSS深入浅出1
iPhone刘海屏适配
iOS 类方法扩展
iPhone X 常用宏
day12

高度是谁决定的？

div{
border:1px solid red;
font-size:20px;
font-family:kai;
}

image.png

在这里面设置了字体大小是20 ，为什么上面的高度是26，它应该是20才对。
原理解释：
基线对齐，建议行高，四线谱，字体设计

image.png

设计师认为，默认字体在26/20=1.3倍行高的时候，他认为这样很好看这里面的26是由设计师自己建议的
比如说 line-height:20;

image.png

后面将字体变大100px，看一下效果。

image.png

可以这么解释，当没有line-height的时候，高度就是这个字体的大小和设计师建议的行高倍数决定的，比如上面字体大小20px*1.3倍建议行高=最终高度26px

当line-height确定的时候，高度就是line-height

缝隙问题

image.png

image.png
通过上面两个对比，发现换行之后会出现一个缝隙。其中根本原因在于浏览器会把连续的多个空格或换行渲染成一个空格。

如果要写两个以上的空格就用&nbsp来表示

比如以下：

image.png

缺点是：空格太多，自适应不行。有可能在这个浏览器你可以，但是换了其他的浏览器你就会发现不合适。或者换一个字体之后，也会出现毛病，因为有的字体设计师用2.2来表示一个空格，有的是2.4，这不一样。
老外不用对齐，因为老外的英文不用分割。
解决方法：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  </head>
  <style>
    div{
      border:1px solid red;
      font-size:20px;
    }
    span{
      border:1px solid green;
      display: inline-block;
      width:5em;
      text-align:justify;
      line-height:20px;
      height:20px;
      overflow:hidden;
    }
    span::after{
      content:"";
      display:inline-block;
      border:blue 1px solid;
      width:100%;
    }
  </style>
  <body>
    <div>
      <span>姓名</span><br>
      <span>联系方式</span>
    </div>
  </body>
</html>

尝试一下

image.png

回到我们刚刚上面说的，有了空隙怎么消除呢？
可以消除掉，需要使用float:left

添加float之前

添加float之后

这里面的空格没有了，但是还是有问题，给ul添加border看看，发现这个边框没有把li包裹起来。

添加border
)
如何修改呢，在父级中添加clear:both;清除浮动。

清除浮动

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
  <style>
    ul{
      border:1px solid green;
      list-style:none;
      margin:0;
      padding:0;
    }
    ul > li{
      border:1px solid red;
      display: inline-block;
      float:left;
    }
    .clearfix::after{
      content:'';
      display: block;
      clear:both;
    }
  </style>
<body>
<div>
  <ul class="clearfix">
    <li>选项1</li>
    <li>选项2</li>
    <li>选项3</li>
    <li>选项4</li>
    <li>选项5</li>
    <li>选项6</li>
    <li>选项7</li>
    <li>选项8</li>
    <li>选项9</li>
    <li>选项10</li>
  </ul>
</div>
</body>
</html>

将上述两个配合起来做一个简单的demo：

image.png

用ul+li来做一个导航

demo

尝试一下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  </head>
  <body>
    <style>
      ul{
        border:1px solid red;  
        list-style:none;
        margin:0;
        padding:0;
      }
      ul >li {
        border:1px solid green;
        display: inline-block;
        width:4em;
        text-align:justify;
        height:20px;
        overflow:hidden;
        float:left;
      }

      ul>li::after{
        border:1px solid blue;
        content:'';
        display: inline-block;
        width:100%
      }

      .clearfix::after{
        content:'';
        display: block;
        clear:both;
      }
    </style>
    <div>
      <ul class="clearfix">
        <li>选项1</li>
        <li>选项2</li>
        <li>选项3</li>
        <li>选项4</li>
        <li>选项5</li>
        <li>选项6</li>
      </ul>
    </div>
  </body>
</html>