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;
具体代码可以看上面的链接.