A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 7小虾米7 中级黑马   /  2016-9-7 00:13  /  1347 人查看  /  1 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

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;

1 个回复

倒序浏览
get知识点,谢谢分享
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马