Web前端开发技术第十周周五课堂笔记

一、布局的原则
先分大块，再分小块；先横再竖

二、几个1→n的问题
1.文本折叠
（1）单行折叠

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

（2）多行折叠

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;

2.垂直居中

（1）单行文本

height: 400px;
line-height: 400px;

（2）多行文本

/* 固定高度 */
display: flex;
align-items: center; /* 垂直居中 */

/* 不固定高度 */
padding-top: 150px;
padding-bottom: 150px;