黑马程序员技术交流社区

标题: css小知识点 [打印本页]

---

作者: 7小虾米7    时间: 2016-9-7 00:13
标题: css小知识点
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;

---

作者: 存少    时间: 2016-9-10 08:31
get知识点,谢谢分享

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2