文档流(Normal flow)

  • 内联元素是默认从左往右排列的,如果内联元素足够多,它就会默认换行。但是如果有一个内联元素是个特别长的单词的话,它是不会被分开得存在于这个文档流的。因为英语中认为连在一起的会是一个单词,不可分割。除非你使用连字符-或者加上word-break: break-all属性。
  • 块级元素从上往下排列。

div里面是内联元素的高度

  • 如果在div里面写一个数字1,那么这个div的高度是由这个字体的建议行高(line-height)来决定的,建议行高是字体设计师定的,每种字体都不一样。
  • 从下面的图可以看出,div的高度是我所写的字体的大小这种字体建议的行高,但是在我字体没有改变的情况下,我改变字体大小为50px,div的高度竟然不等于50*1.32=66了,字体大小为100px和500px的时候,比值却都是1.32,这是我还没有搞懂的点,如果有人知道的话,希望可以在下面留言指导一下。

07349-bh88goowxkh.png
81101-m24zz9h20gg.png
00708-fno43r4vox.png


  • 上面都是在line-height:normal的情况下,这种情况下,div的高度会被字体撑起来。但是如果你把line-height写死的话,字就会溢出了,而不是把它撑开。

03866-511hlg08rke.png

如何实现文字的两端对齐

  • 首先想到的是text-align:justify;,但是这只对多行文字有用。那么我们可以利用伪元素把它下面加个空白的内容。
<style>
span {
  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>

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

文字溢出省略

  • 单行文本
div{
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
  • 多行文本
div{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

此时如果要实现文字垂直居中的话,不要把div的高度写死,只需要把line-height写死,然后用上下的padding来实现居中。

脱离文档流

  1. float: left
  2. position: absolute
  3. position: fixed

position: relative是不会脱离文档流的,块级元素还是可以定位的,如果加上top: 10px会相对于原来的那个位置定位,且不会影响其他的块级元素,因为我其实还是占据着文档流的原来的那个位置。

div里面的div如何垂直居中