探讨div中的高度与宽度

在学习css的过程中，总会遇到各式各样的超自然现象无法解释，当中有不少疑惑，决定用这篇文章来一探究竟。本文重点用常见例子的方式来探讨已知div的高度和宽度时的实际应用。

Previously，请记住一点：

写css请用border调试

写css请用border调试

写css请用border调试

1.包裹文字时的div高度

从上面是div的高度不是20px，说明跟font-size属性无关，只是由line-height决定，由字体的行高决定。

扩展知识：line-height和font-size之间的关系是由字体设计师决定的，当然我们可以自己手动设置line-height。

2.多行文字实现左右对齐的效果

这时候设置border只是便于调试。

css代码应该是这样的：

<style>
    div{
      border:1px solid green;
      font-size:20px;
    }
    span{
      border:1px solid red;
      display:inline-block;
      width:5em;  
      text-align:justify;
      line-height:20px;   /*行高和高度相同 */
      overflow: hidden;   /*超出范围隐藏 */
      height:20px;   /* 高度设置和外层div相同 */
    }
    span::after{
      content:'';
      display:inline-block;
      width: 100%;
      border:1px solid blue;
    } /*给span补充一个和span等宽的block元素*/ 
  </style>

3. 老生常谈的清除浮动

css结构如下：

ul{
        margin:0px;
        padding:0px;
        list-style:none;
        border:1px solid red;
      }        
      ul>li{
        float:left;
        border:1px solid green;
      }

      .clearfix::after{
        content:'';
        display:block;
        clear:both;
      }

4. 多行文本溢出时省略

4.1. 只显示单行

效果如下：

css如下：

div{
   white-space:overrap;
   overflow:hidden;
   text-overflow: ellipsis;
}

4.2. 显示多行

效果如下：

代码：

/*以下代码并不兼容IE8*/
    div{
      border:1px solid red;
      display:-webkit-box;
      -webkit-line-clamp:2;   /*代表只显示几行*/
      -webkit-box-orient:vertical;      
    }

5.文字垂直居中

文字需要显示垂直居中的时候，千万不要设置height的高度

文字需要显示垂直居中的时候，千万不要设置height的高度

文字需要显示垂直居中的时候，千万不要设置height的高度

不然会出现这样恶心的效果；

正确的解法应该是通过设置line-height的值，然后通过padding、margin的值自适应高度的方式设置div的高度

div{
      border:1px solid red;
      line-height:30px;
      padding:10px;
      text-align: center;
    }

6. margin合并

当div里面嵌套div（块级元素）的时候，在子div设置margin的时候会有两种情况

• 父级div没有设置margin或者border的时候，子级div会出现合并父级的情况，父元素并未因此撑高（左右宽度是有撑大的）。
• 父级div设置了margin或者border的时候，父级的高度会因此被撑高，并且子级的div的margin会被框在父级的border之内。

7.总结

• 如果div里面包裹内联元素，div 的高度取决与内联元素 line-height 行高，line-height 由字体设计师决定
  
• 特定的font-family（字体）会有建议的line-height
  
• 两个行内元素之间有看不见的符号（Tab，Space，Enter ）都只显示一个空格
  
• div的高度是由内部文档流中元素的总和决定的。其中，内联元素的排列顺序从左到右，块级元素从上到下
  
• 脱离文档流的意思是该元素不计入高度，分别有三种方式：position:fixed；position:absolute；float:left。
  
• 内联元素的宽度是会受margin、padding的影响，但是高度并不受它们的影响。
  
• 块级元素的宽度千万不要去改，其高度是由其包裹内的文档流的高度决定的。
  
• 如果块级里面包裹内联元素，则根据内联元素的line-height决定。
  
• 如果块级里面包裹块级元素，则跟里面的margin、padding、border都有关