移动端概念

屏幕尺寸：屏幕对角线的长度，单位一般为英寸；

PPI：单元英寸内的物理像素点的个数，值越大，越清晰；

物理像素点：形成像素的最小单位。

1.物理分辨率是生产屏幕时就固定的，它是不可被改变的。

2.逻辑分辨率是由软件（驱动）所决定的。

DPR=物理分辨率/逻辑分辨率

如果没有添加视口标签，默认宽是980px

视口标签

百分比布局

百分比布局也叫流式布局

flex布局/弹性布局

display:flex;

添加了df的属性就是弹性容器

默认宽度就是父元素的宽度，高度由内容所撑开。

弹性盒子：就是弹性容器的最近一级的子元素。特点：

1.默认宽度由内容所撑开

2.默认高度和父元素保持一致，因为和侧轴对齐拉伸。

3.弹性盒子没有块级元素，行内块元素，行内元素之分，通通都是弹性盒子。那么就是统统都可以设置宽高。

4.弹性盒子默认不会换行，会沿着主轴方向一行显示。

5.要注意弹性盒子的概念。

弹性盒子属性

水平主轴对齐方式

display:flex;

添加给弹性盒子最近一级的父元素

justify-content: space-evenly;

每个盒子的左右间距都相等，包括两边

（弹性盒子与容器之间间距相等）

justify-content: space-between;

盒子与盒子之间的间距相等，不包括两边，两边为0

（空白间距均分在相邻盒子之间）

justify-content: space-around;

每个盒子单独的左右边距固定，也就是说，盒子与盒子的之间的距离为2份，最左最右为一份。

（空白间距均分在弹性盒子两侧）

justify-content: center;

沿着主轴居中排列

不常用：

justify-content: flex-start

默认值，从起点开始依次排列。

justify-content: flex-end

右边开始显示（还是从左依次排列）

align-items（添加到弹性容器）

align-self （控制某个弹性盒子在侧轴的对齐方式）（是给需要单独控制侧轴方向对齐方式的弹性盒子添加）

align-items: flex-start

默认值，起点开始依次排列（上方起点）

align-items: flex-end

终点开始依次排列（下方终点）

align-items: center

侧轴垂直居中

align-items: stretch;

默认值，弹性盒子沿着主轴线呗拉伸至铺满容器。

伸缩比

1.所有的弹性盒子都添加相同的flex值，均分弹性容器的宽度；如果flex值不同，根据比例进行分配。

2.其他的盒子宽度固定，只有一个盒子设置了flex:1 --- 占据父元素剩余的宽度

利用display: flex;完成水平垂直居中

项目搭建基础

新建页面，引入第三方资源（如字体图标）

引入基础样式表。

写好注释（让自己以后看得懂，也让别人以后看得懂）

[info（用户信息）common（盒子的公共样式）]  

字体图标的修饰要单独加类名

写好一个模块要注释好以及折叠好。

文本行数超出隐藏显示省略号

.twoLines {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertica
}
​

\