WEB前端布局核心

标准盒模型与怪异盒模型

• 标准盒模型 盒子大小不变基础上 向外 + border padding

• 怪异盒模型(IE盒模型) 盒子大小不变基础上 向内 + border padding

    .box {
        box-sizing: border-box;
    }

弹性盒子模型

• 转换当前元素类型为弹性盒子类型

.box {
    display: flex;
}

• 设置主轴排列方式 横向或者纵向  flex-direction

.box {

    display: flex;

    flex-direction:row; /* 默认从左排列 */

    flex-direction:row-reverse; /* 从右向左排列 */

    flex-direction:column; /* 从上至下 */

    flex-direction: column-reverse; /* 反之 */

}

• 控制横向对齐 x轴方式 justify-content

.box {

    display: flex;

    justify-content: flex-start; /* 默认左对齐*/

    justify-content: flex-end; /* 默认右对齐*/

    justify-content: center; /* 水平居中 */

    justify-content: space-between; /* 两边贴死,中间自动分配 */

    justify-content: space-around;  /* 全部自动分配 */
}

• 控制 纵向对齐方式 y轴 align-items

.box {

    display: flex;

    align-items: stretch; /* 默认值 子元素被拉伸适应容器 */

    align-items: center; /* 纵向居中*/

    align-items: flex-start;  /* 纵向顶部 */

    align-items: flex-end; /* 纵向底部 */

    align-items: baselin;e /* 基线对齐 */
}

• 垂直居中方案

 .box {
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
 }