9.17(day11)

#1 移动端页面的设计规范
1.手机页面的PSD文件上面标注的是px单位,iphone6为标准
2.我们编写代码的时候,推荐使用rem+px.
3.通常会加一段JS代码,根据当前设备宽度动态调节font-size的大小
4.rem单位的元素也会随之变化(rem表示HTML标签上font-size的倍数)
#2 弹性伸缩盒子
父标签{display:flex;}
子标签1{flex:1;}
子标签2{flex:2;}
/* 将父标签的宽度分成3份,孩子1占1份,孩子2占2份.高度默认占满 */
#3 flex-direction
父标签{
display:flex;
flex-direction:row; /* 从左到右排列(默认) */
flex-direction:row-reverse; /* 从右往左排列 */
flex-direction:column; /*从上到下排列 */
flex-direction:column-reverse; /*从下到上排列 */
}
#4 justify-content
父标签{
justify-content:flex-start; /* 左对齐(不是绝对的) */
justify-content:flex-end; /* 右对齐(不是绝对的) */
justify-content:center; /* 居中 */
justify-content:space-between; /* 两端对齐 */
justify-content:space-around; /* 两端对齐且两端有间距 */
}
#5 aligen-items(垂直)
父标签{
align-items:flex-start; /* 顶部 */
align-items:flex-end; /* 底部 */
align-items:stretch; /* 拉伸(占满) */
align-items:baseline; /* 基线对齐 */
align-items:center; /* 居中 */
}

猜你喜欢

转载自www.cnblogs.com/jihongtao/p/9663348.html