CSS学习笔记之技巧杂谈

1. div 的宽高

错误认识

div 的高度是字体大小的 1.3 ( 或者其他倍数 ) 倍

错误原因

26/20 = 1.3

纠正

div 的高不是由字体决定的，字体的大小和设计有关，不同字体大小不一，如果换成其他字体，那么就不是 1.3 倍了，详细分析见 深入理解 CSS：字体度量、line-height 和 vertical-align

<div>123</div>

div{
      border:1px solid red;
      font-size:100px;
      line-height:20px;
    } 

字体大小为 100 px，而行高是 20 px，border 并没有把字体全部包住，充分说明行高和字体大小没有关系。

2. 空格的显示

在 HTML 中，多个空格会被合并成一个空格，要用空格占位符 &nbsp 表示多个空格。 nbsp = no break space

举例子

<div>
  1     2      3
</div>

<div>
  1 &nbsp&nbsp&nbsp&nbsp 2 &nbsp&nbsp&nbsp&nbsp&nbsp 3
</div>

3. 行尾的对齐

在 p 标签上加 text-align:justify 完美解决

4. 汉字的对齐

<div>
  <span>姓名</span><br>
  <span>联系方式</span>
</div>

div{
      border:1px solid red;
      font-size:20px;
    }
span{
      border:1px solid green;
      display: inline-block;
      width:100px;
      text-align: justify;
    }
span::after{
      content:'';
      display: inline-block;
      width:100%;
      border:1px solid blue;
    }

因为姓名两个字要和 width:100% 的元素对齐，所以汉字就抻开了,姓和蓝色左边框对齐，名和蓝色右边框对齐。

把蓝色空行去掉怎么办？

强制 span 的高度,超过高度的 overflow: hidden

span{
      border:1px solid green;
      display: inline-block;
      width:100px;
      text-align: justify;
      line-height:20px;
      height:20px;
      overflow: hidden;
    }

5. 导航栏莫名其妙的空隙

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
  </ul>
  
ul{
    margin:0;
    padding:0;
   }
ul li{
      display: inline-block;
      list-style:none;
      border:1px solid red;
     }

疑问 ： 选项1和选项2之间什么都没有，空隙哪来的呢？

原因 ：两个 inline 元素或者 inline-block 元素之间存在回车、Tab或者空格，都会显示成空格。

解决

ul li{
    float: left;
    list-style:none;
    border:1px solid red;
   }

浮动元素是不遵从 inline 元素的特性的。

清除浮动

  <ul class="clearfix">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
  </ul>
  
    ul{
      border:1px solid blue;
    }
    ul li{
      float: left;
      list-style:none;
      border:1px solid red;
    }
    .clearfix::after{
      content:'';
      display: block;
      clear:both;
    }

在父元素上添加 .clearfix 来清除浮动。

6. 文字溢出

<div>
  1
  helllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllo
  222222222222222222222222222222222222222222222
  3
</div>

为什么？？？

因为浏览器以为 helllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllo 或者 222222222222222222222222222222222222222222222 是一个单词。

解决

添加 word-break:break-all;，告诉浏览器不需要确定是不是一个整体单词，需要断开就断开。