flex布局

移动端页面：

移动端与pc端的区别：有无版心

分辨率：物理分辨率和逻辑分辨率

页面设计一般按照逻辑分辨率来进行设计

视口：meta标签

百分比布局

宽度自适应，高度固定的布局

FLEX布局

组成部分：

弹性容器（父元素）

弹性盒子（子元素）

主轴（水平方向）

侧轴/交叉轴（水平方向）

设置方式：

display：flex //设置给父元素（亲爹）

主轴对齐方式：

justify-content: strat //默认值，从左排布
justify-content: end   //从右排布
justify-content：center//居中显示
justify-content: space-between //间距在弹性盒子之间
justify-content: space-evenly //盒子内的所有间距包括左右都一样
justify-content: space-around // 间距加在子集的两侧（视觉效果：子级之间的距离是父级两头距离的2倍）

侧轴对齐方式：

align-items: strat //默认值，从起点排布
align-items: end   //从结束点排布
align-items:center //垂直方向居中显示
align-items:stretch //拉伸 ，默认值

注意：当子级有高度时，拉伸无法显示，在设置拉伸状态时，需要去掉子级的高度

单独设置某个弹性盒子的侧轴对齐方式

align-self：center
align-self：start
align-self：end

注意，justify-content 和align-items的属性是添加在父元素身上，

而align-self是添加在子元素身上。！！！

未知宽高的盒子水平垂直居中（面试）

div{
    position:absolute;
    top:50%
    left:50%
    transform:translate(-50% -50%)
}

display:flex;
justify-content：center;
align-items:center;

移动端上下布局方式

.bottom{
    position：fixed;
    left:0;
    right:0;
    bottom:0;
    height:50px;
    }
.top {
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:50px;
    //overflow:auto
}

布局方式原理：

当移动端采用上下或上中下布局方式时，采用定位的方式进行布局，让top值为0，bottom为下方盒子的高度，让上方盒子的高度占满除下面盒子高度以外的所有空间，上中下类似。

溢出显示省略号：

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

最大宽度、最小宽度

max-width、min-width