移动开发基础知识

内减模式 box-sizing: border-box;

   1 元素的宽度 == 在css中的写的width的值 （不再受border和padding影响）

    2 盒子模型 =  border + padding + 内容块

          50%   =   border增大 + padding不变 + 内容块减小

flex 布局 = 伸缩布局 = 伸缩盒子=弹性布局=弹性盒子

1 把哪个元素变成 伸缩盒子 就在这个元素上加一行代码  display: flex;

  2  display: flex; 不会对该盒子产生 其他的布局影响

        1 margin

        2 定位

        3 浮动

      元素加上  display: flex; 布局效果 和 不加这一行代码是一样的！！！

    3 父项 子项

      谁身上 有   display: flex; 谁 就是 父项

      父项里面的 子元素 就成 子项

    4 子项

      1 就已经不存在 以前的 块级 和 行内 或者 行内块的概念 统一都可以直接加入 宽度和高度

      2 子项不加宽度和高度的时候 宽度和高度的 默认值是怎么样

        子项 宽度 = 内容撑开

        子项 高度 =  父项的高度

      3 子项

        1 margin  有效果

        2 定位 有效果

        3 浮动 没有效果

        4 布局的时候 子项 虽然说定位和 margin是有效果 但是一般不用！！！

          假如 你都要使用定位或者maring 就表示 你 没有必要使用flex布局

设置主轴方向

      flex-direction:   

      1 row  x轴的正方向 左到右   常用

      2 row-reverse  从右到左

      3 column  y轴正方向 上到下  常用 

      4 column-reverse 从下到上

设置父项 子项的对齐方式

      justify-content:

      1 flex-start;  左对齐

      2 flex-end   右对齐

      3 center  水平居中

      4 space-between  先两边放置 然后再平分空白区间

      5  space-around 平分空白区间

设置侧轴的子项对齐方式

        align-items:

        1 flex-start 上对齐

        2 flex-end 下对齐

        3 center 居中对齐

父项的换行属性  flex-wrap: wrap;

侧轴子项对齐方式 多行

      align-content

      flex-start 上对齐

      flex-end; 下对齐

      center 居中

      space-between 先上下 再平分空间

      space-around  平分空间

子项 设置自己在侧轴上的对齐方式 align-self: center;   flex-start   flex-end  center

设置子项的排列顺序 在主轴上

      order:0；

        1 默认值 都是 0

        2 值越小 越靠前

设置子项 占父项的宽度的份数 比例   flex: 2; 子项的flex不会和父项的换行属性一起出现

转载于:https://my.oschina.net/u/4155188/blog/3067158