CSS 高度与宽度

文字的对齐

<style>
    div{
      border: 1px solid green;
    }
    span{
      border: 1px solid red;
      display: inline-block;
      width: 4em;
      text-align: justify;
      line-height: 20px;
      height: 20px;
      overflow: hidden;
    }
    span::after{
      content: '';
      display: inline-block;
      width: 100%
    }
</style>

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

word-break: break-all

<style>
  div{
    border: 1px solid green;
  }
</style>

<div>
  0
  111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
  2
  3
  4
</div>

发现文字超出了div的宽度，因为浏览器不会自动打断，可以添加连接符号‘-’，或者用 word-break: break-all;

<style>
  div{
    border: 1px solid green;
    word-break: break-all;
  }
</style>

单行溢出省略

<style>
  div{
    border: 1px solid red;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>

多行溢出省略

<style>
  div{
    border: 1px solid red;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; 
    overflow: hidden;
  }
</style>

margin合并

margin 能否使父元素变高取决于父元素是否有东西挡住子元素，可以是 border ，
padding ，（overflow: hidden; 也可以，不建议使用）

如果一个div中包含一个div1，那么这个div的高度由内部的div1高度决定，即 div1高度 + padding + border + margin（看情况是否添加）

div 高度

div高度由内部文档流中元素的高度总和决定。
脱离文档流的方法：

• float: left;
• position: absolute;
• position: fixed;