Normal flow 文档流

Normal flow正常翻译应该是普通流, 但是我们经常叫做文档流. 哪些时文档流呢? 这个一般看postion属性了.
position属性有五个值, 分别是static, relative, fixed, absolute, inherit. 后面又出了一个新的实验性质的API为sticky. 这个新的API我们暂时不讨论.
其中, 属性值为fixed, absolute会使元素脱离文档流. 浮动定位的float属性也会使元素脱离文档流. 应用fixed, absolute, float的元素通常有定位的专属名词, 如下:

position: fixed;    //产生固定定位
position: absolute; //产生绝对定位
float: left;    //产生浮动定位

position: static 是position默认的属性值, 我们可以叫它静态定位.

在一个文档流中通常有两类元素, 块级元素和内联元素. 块级元素垂直排列, 一个块占一行. 内联元素在一行内一个接着一个排列, 若当前行无法容纳所有的内联元素时, 才会换行.

由于块级元素和内联元素的特性, 可以给块级元素设置宽高, 但是无法给内联元素设置宽高, 即使给内联元素设置了宽高也不起作用.

那么在不设置宽高的情况下, 块级元素和内联元素的宽高如何决定呢?

其实只要记住一句话即可, 文档流元素的宽高由其子元素决定.

对于内联元素如span, 由于它无法设置宽高, 因此它的宽有span标签内的内容决定, 高由span标签的行高决定, 我们也可以给它设置line-height, 而不是height
对于块级元素如div, 它的宽一般为页面宽, 当然也可以设置. 它的高也可以设置, 在没有设置的情况下, 其高由子元素决定, 若div标签没有内容则高为0.

注意, 内联元素或者文本间有连续的多个空格, 回车会被显示为一个空格.

下面有几个demo.

超出文本显示省略号

当文字超出div时, 显示为省略号

<div id="xx">
  你好我是谁你好我是谁你好我是谁你好我是谁你好我是谁你好我是谁你好我是谁你好我是谁你好我是谁
</div>

#xx {
  border: 1px solid red;
  width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

结果可以在这里查看: http://jsbin.com/dokotot/edit?html,css,output
我们注意到在100px宽下, 文本会断行, 但是这个省略号是在一行显示的. 如果我们向让它在二行显示呢? 即多行文本省略.
我们可以这样写:

<div class="module line-clamp">
  <p>我想要多行文本省略!我想要多行文本省略!我想要多行文本省略!我想要多行文本省略!我想要多行文本省略!我想要多行文本省略!我想要多行文本省略!我想要多行文本省略!我想要多行文本省略!我想要多行文本省略!我想要多行文本省略!</p>
</div>

.module {
  width: 100px;

}

.module p {
  margin: 0;
}

.line-clamp {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;   //把数字改成2, 则会只显示两行
  -webkit-box-orient: vertical;  
}

显示如下: http://jsbin.com/vetufep/2/edit?html,css,output

文字垂直居中

想让文字垂直居中可以使用line-height和padding.

<div>
      我想让文字垂直居中!
</div>

div {
  border: 1px solid red;
  line-height: 24px;
  padding: 8px;
}

显示如下:http://jsbin.com/lalozat/edit?html,css,output
还想让文字水平居中? 只需在对应元素上加上下面这个css规则即可:

text-align: center;

具体代码可以看上面的链接.

CSS中的宽度与高度

Normal flow 文档流

超出文本显示省略号

文字垂直居中

猜你喜欢