移动端页面:
移动端与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