省略号
单行文本省略
当行文本
属性
white-space:nowrap;将多余的收起来。再用属性overflow:hidden;将超过边框部分隐藏起来。
隐藏
最有用属性text-overflow: ellipsis;添加省略号
div{
border:red 1px solid;
white-space: nowrap;
overflow:hidden;
text-overflow: ellipsis;
}
多行文本省略
不知道，google抄。
div{
border:red 1px solid;
display: -webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
居中的问题
做一个垂直居中，千万不要固定高度。举个例子：
例子
如上有很多的文本，现在将它省略之后就是一行文本了，这一行文本，我现在要固定高度是40px；然后居中。
居中错误示范1
但是现在要将单行省略都去掉
错误示范2
发现页面排版错误，但是现在又要在这个文本后面添加新的文本
错误示范3
会发现这个排版真的有BUG，问题好多。
这个就是高度固定的原因。解释原因：就去看一下CSS深入浅出（1）-流这篇文章讲的流
那么如何去文字居中呢？
利用padding中的top和bottom这个属性中的两个值上下对称来居中，同时将行高设置一下line-height:40px;
div{
border:red 1px solid;
white-space: nowrap;
overflow:hidden;
text-overflow: ellipsis;
line-height: 40px;
padding：10px 0;
}
margin合并
image.png
看上面的例子，父亲dad包含儿子，看一下盒模型
儿子的高度30（15+15）+21=51
父亲的高度51+20=71
上面的例子说明父亲包含儿子的高度。但是：如果儿子里面添加了属性padding和margin属性，那么出现了透明边框
添加padding和margin之后
如果将border改成了outline
更改父亲为outline
再看一下盒模型,父亲的高度不包含儿子的margin
儿子的盒模型
margin-top和bottom没了
如果将父亲的margin改成5px；那么儿子的margin将会和父亲的margin重合了。
我不知道为什么这个浏览器不显示margin-top 和margin-bottom 5px
image.png
看一下别人的
image.png
那么如何让儿子下来呢？
就在爸爸里面添加border-top或者 border-bottom这个属性。
border-top
所以儿子的margin能不能使父元素变高，就取决于父元素有没有什么东西挡住这个儿子的margin。挡住的东西可以不是border也可以是padding
padding-top和padding-bottom
还有一个很奇怪的就是
border:0.1px solid grey;这个也可以
border:0.1px solid grey;
还有一个可以清除合并，添加
overflow:hiddlen;
image.png
缺点：万不得已的时候不要用最后一个，因为用了最后一个，你要是需要做悬浮，你就完了。
当两个空的块级元素嵌套时，如果内部的块设置有margin-top属性，而且父元素没有下边解决方法所述的特征，那么内部块的margin-top属性会绑架父元素（即将margin-top传递凌驾给了父元素）。
就好比一个小兵，看到上级有漏洞，就假传圣旨，利用漏洞扩张自己的权利。只要设置父元素的border（栅栏）或者padding（隔离墙），就能管住这个调皮的下属。
网友评论