1.div高度

div单行内联元素高度
div高度与字体大小无关，只与行高line-height有关。

知识点1：如果div里面只有一个内联元素，div的高度就是这一行内联元素的行高。如果有多行，就把每一行的行高加起来一起算。

多行

文字对齐小技巧

  <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;
      overflow: hidden; /*这里行高和高度一样，超出的部分就看不见了*/
      height: 20px;
    }
    span::after{
      content:'';
      display:inline-block;
      width:100%;
      border: 1px solid blue;
    }
  </style>
  
<body>
  <div>
    <span>姓名</span><br>
    <span>联系方式</span>
  </div>

image.png

2.多行文字溢出

一行文本过长就变成省略号

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
  
  <style>
    .text{
      border: 1px solid red;
      white-space: nowrap; /*文字不换行，超出部分往右显示，div的宽度不是由文字决定的*/
      overflow: hidden;
      text-overflow: ellipsis; /*超出部分变成省略号*/
    }
  </style>
  
<body>
  <div class="text">
    d
    a
    ...
    5
    6
 
  </div>
</body>
</html>

单行文本溢出
http://js.jirengu.com/rojoh/2/edit

多行文本超出部分变成省略号

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
  
  <style>
    .text{
      border: 1px solid red;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis; /*超出部分变成省略号*/
    }
  </style>
  
<body>
  <div class="text">
    d
    a
    ...
    5
    6
 
  </div>
</body>
</html>

多行文本溢出
http://js.jirengu.com/zomiz/2/edit

3.文字垂直居中

  <style>
    .center{
      outline: 1px solid red;
      /*垂直居中。注：千万别把高度height写死*/
      line-height: 24px;
      padding: 8px 0;
      /*水平居中*/
      text-align: center;
    }
  </style>
  
<body>
  <div class="center">
    0123456789
  </div>
</body>

好处即使多行文字也很好看

image.png

4.margin合并

如果父元素没有东西挡住margin，儿子元素的外边距就会和父元素的外边距合并起来。

  <style>
    .son{
      border: 5px solid red;
      margin: 10px;
    }
    .dad{
      outline: 1px solid green;
      margin: 5px;
    }
  </style>
<body>
  
<div class="dad">
  <div class="son">
    111
  </div>
</div>
  
</body>

子元素

父元素

image.png

怎么解决合并问题

加border

image.png

父元素会不会变高取决于有没有东西挡住这个margin，可以是border，padding，overflow：hidden

padding
overflow:hidden
总结：如果div里面还有div，它的高度由里面div高度加padding，加margin，这个margin有时候要加有时候不要紧，具体看情况。