html5 移动端-1

移动端适配

IE（怪异）合模型：设置宽高后，占地面积就不会发生改变，增加padding后会压缩内容区域的大小，开启怪异合模型：box-sizing：border-box；
标准合模型：宽高只是设置内容区域的大小，设置padding后总的占地面积会发生改变。

弹性盒子

弹性盒子是css3中新的布局模式，又叫收缩合模型，开启弹性盒子display：flex；
容器默认存在两根轴：水平轴main axis(方向位置都会变不能倾斜)，垂直轴cross axis
主轴开始位置main start 结束位置 main end；
交叉轴开始位置cross start 结束位置 cross end;
主轴上的位置变化
justufy-content:

flex-start；开始位置默认
flex-end；结束位置
center；中心位置
space-around；两端对齐元素之间的距离=2*元素到边框的距离
space-between；元素贴着两边，元素之间距离相等
主轴的方向
flex-direction:
row 从左到右
row-reverse从右到左
column 从上到下
column-reverse 从下到上

交叉轴上的对齐方式
align-items:

flex-start;交叉轴的起点对齐
flex-end;交叉轴的终点对齐
center；交叉轴上中点对齐
baseline；根据第一行文字的基线对齐

开启换行弹性合模型下默认不换行
flew-wrap:

nowrap;默认不换行
center；换行
wrap-reverse;倒序换行

align-content 的功能和align-item 类似相同点都是设置自身子元素在自身上的对齐方式
不同点：改属性必须是多行的时候，对单行无效，同时可以去掉多余的行间距。
box-shadow：盒子阴影；
属性：

水平位置的偏移
垂直位置的偏移
模糊度
阴影面积
阴影颜色
内外阴影outset 外 inset内
元素的排序需要将当前层级的每个元素都排序，否则: 排序的元素和未排的元素按照两套顺序排列

			  .box:nth-child(1){
                   order: 3;
              }
              .box:nth-child(2){
                   order: 2;
              }             
              .box:nth-child(3){
                   order: 1;
              }

元素的缩放
flex-shrink元素的缩放：默认比例；假如一个大div300px内有5个div宽98px
超出部分/元素的总个数 = 每个元素要收缩的面积

              .main>div:nth-child(1){
                   flex-shrink:2;
                   
              }
              .main>div:nth-child(2){
                   flex-shrink:1;
              }             
              .main>div:nth-child(3){
                   flex-shrink:1;
              }             
              .main>div:nth-child(4){
                   flex-shrink:0.5;
              }    
              .main>div:nth-child(5){
                   flex-shrink:0.5;
              }

元素的放大：flex-grow 父级500px 三个子元素一个100px
未占面积/元素个数（分配分数）= 每个元素放大的面积

              .mis>div:nth-child(1){
                   flex-grow:2;
              }
              .mis>div:nth-child(2){
                   flex-grow:2;
              }
              .mis>div:nth-child(3){
                   flex-grow:1;
              }

Jason–json 发布了78 篇原创文章 · 获赞 9 · 访问量 6799 私信关注

原文地址：https://blog.csdn.net/weixin_46146313/article/details/104185736

移动端适配

弹性盒子

相关推荐