弹性布局

移动端常见布局

视口：
布局视口(浏览器默认是980px)、视觉视口，理想视口

物理像素 一个手机分辨率是780*1024，这表明在行上有780个小颗粒 pc端1px为一个物理像素，但是在移动端都不相同。 一个px能显示的物理像素点的个数，称为物理像素比 。

倍图是解决图片因为放大造成的模糊，二倍图意思是我们准备的图片要比实际需要的图片大两倍，这样手机进行放大或者缩放就不会出现模糊
参考链接：https://www.jianshu.com/p/7c5fdf90c0ef

- -moz代表firefox浏览器私有属性
- -ms代表ie浏览器私有属性，
- -webkit代表safari、chrome私有属性（最常见）

1.单独制作移动端页面

- 流式布局（百分比布局） 京东
- flex弹性布局 携程
- less+rem+媒体查询布局 苏宁
- 混合布局

2.响应式布局

- 媒体查询
- Bootstrap

flex布局
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
当父元素设置为flex布局后，子元素的float，clear,vertical-align属性就会失效。通过给父盒子添加flex属性，用来控制子盒子的位置和排列方式

当父元素设置为flex布局后，子元素的float，clear,vertical-align属性就会失效

步骤：
1.对于flex布局，首先要明确谁是主轴，谁是副轴
flex-direction: row | row-reverse | column | column-reverse;
2.在父元素中添加flex-direction， justify-content属性

 <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <!-- <span>4</span>
        <span>5</span> -->
    </div>

div {
    width: 800px;
    height: 300px;
    background-color: pink;
    display: flex;
    /*排列方向，元素跟着主轴排列,主轴是x轴*/
    flex-direction: row; 
    /* justify有版面的意思 */
    justify-content: flex-start;/* 从左往右对齐，靠左浮动 */
    /* justify-content: flex-end;  从右往左对齐，靠右浮动*/
    /* justify-content: center;    中间对齐*/
    /* justify-content: space-between; 左浮动，中间，右浮动；先两边贴边，再平分剩余*/
    /* justify-content: space-evenly; */
    /* justify-content: space-around; 平分剩余空间 */
   /* space-evenly，flex 元素之间和 flex 元素和容器的空间总是相等的 */
   /* space-around，只有flex 元素之间的空间是相等的，第一个 flex 元素和最后一个 flex 元素和容器的空间是 flex 元素间空间的一 半 */
   /* flex-wrap: wrap; */
   /* 主轴侧轴全部都是水平居中 */
   /* justify-content: center; */
   /* align-items: center; */
   /* align-items: flex-start; 沿着侧轴y轴，所以在最上边 */
   /* align-items: stretch; */
   /* 沿着侧轴拉伸，子元素不要设置高度 */
}

flex-wrap: nowrap | wrap | wrap-reverse;
/* 控制伸缩容器是单行还是多行，以及交叉轴的方向(交叉轴决定新行堆放的方向)。 */
align-items：normal | stretch |center |flex-start| flex-end…
对齐方式，沿着主轴对齐方式，stretch中子元素不要设置高度，会根据父元素的高度拉伸进行适应

圣杯布局
圣杯布局,左右固定，中间活动
div {
width: 60%;
height: 300px;
background-color: pink;
/* 父元素设置布局格式 */
display: flex;
margin: 20px auto;
}

    div span:nth-child(1) {
        width: 50px;
        height: 100px;
        background-color: red;
    }
    
    div span:nth-child(5) {
        width: 50px;
        height: 100px;
        background-color: red;
    }
    /* 圣杯布局,左右固定，中间活动 */
    div span {
        background-color: green;
        height: 100px;
        /* 不设置宽度 */
        /* 先在最左边最右边设置一个固定的span，剩余的盒子再判断份数 */
        /* 即剩余盒子占一整份,就是剩余盒子把所有的空间都占据了 */
        flex: 1;
    }

子元素自我设置在父元素的哪个位置

<p>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </p>

 p {
       width: 60%;
       height: 300px;
       background-color: pink;
       display: flex;
       margin: 0 auto;
}
 p span:nth-child(3) {
      /* 将自己span放到父元素底部, */
       align-self: flex-end;
}

额外知识点
针对移动端长按某个加载图片或者超链接或者其他元素时，会弹出菜单，以下解决此类问题：

a {
    /* 加上这个属性才能给按钮和输入框自定义样式 */
    appearance: none;
    /* 点击时会显示高亮，我们需要清除，设置显示透明 */
    -webkit-tap-highlight-color: transparent;
  }
  
img,a {
    /* 当我们在键盘上安的时间很长会弹出菜单,禁用长按界面时弹出菜单 */
   -webkit-touch-callout: none;
}