css小知识点集锦:
1.子元素文字始终居中
div{ width:300px; height:300px;border:1px solid red; }
p{ height:300px; display:table-cell; verticle-align:middle; }
2.盒子水平、垂直居中
2-1 :css3写法
display: flex;
justify-content: center; /* horizontal centering */
align-items: center; /* vertical centering */
2-2 :普通写法 //不支持IE6,IE7
display: table-cell;
vertical-align: middle;
3.给定宽度,内部文字,元素平均分布
display: flex;//父盒子
justify-content: space-around/space-between;//父盒子
4.文字显示第N行之后变成…显示
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; //这儿的数字代表的就是你所需要实现效果的第N行
-webkit-box-orient: vertical;
5.flex-grow 属性规定项目将相对于同一容器内其他灵活的项目进行扩展的量。
父元素:display:flex;
子元素:flex-flow: number|initial|inherit;
|
|