CSS学习笔记 day09 2020-4-14

二倍精灵图做法

• 在firework里面把精灵图等比例缩放为原来的一半

• 之后根据大小测量坐标

• 注意代码里面background-size也要写：精灵图原来宽度的一半

vertical-align清除图片间隙

flex弹性布局

• 操作方便，布局极为简单，移动端应用很广泛
• PC端浏览器支持情况较差
• IE11或更低版本，不支持或仅部分支持

为什么清除浮动？

1.父级没高度

2.子盒子浮动了

3.影响下面布局了，我们就应该清除浮动了

• 额外标签法

• 父元素overflow:hidden

• 父元素after伪元素

• 父元素双伪元素

    .clearfix:before, .clearfix:after {
        content: "";
        display: table;
    }

    .clearfix:after {
        clear: both;
    }

    .clearfix {
        *zoom: 1
    }

flex布局原理

• 体验中div就是flex父容器

• 体验中span就是子容器flex项目

• 子容器可以横向排列也可以纵向排列

总结flex布局原理：

就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

常见父项属性

• flex-direction：设置主轴的方向
• justify-content：设置主轴上的子元素排列方式
• flex-wrap：设置子元素是否换行
• align-content：设置侧轴上的子元素的排列方式（多行）
• align-items：设置侧轴上的子元素排列方式（单行）
• flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap

3.2 flex-direction设置主轴的方向

在flex布局中，分为主轴和侧轴两个方向，主轴水平向右，侧轴垂直向下。

/*默认的主轴是x轴*/
/*我们的元素是跟着主轴来排列的*/
/*flex-direction:row*/
/*简单了解 翻转*/
/*flex-direction:row-reverse*/
/*我们可以把主轴设为y值*/
/*    flex-direction: column;*/

3.3 justify-content 设置主轴上的子元素排列方式

注意：使用这个属性之前一定要确定好主轴是哪个

• flex-start 默认值 从头部开始 如果主轴是x轴，则从左到右
• flex-end 从尾部开始排列
• center 从主轴居中对齐（如果主轴是x轴则水平居中）
• space-around 平分剩余控件
• space-between 先两边贴边 再平分剩余空间（重要）

3.4 flex-wrap 设置子元素是否换行

nowrap 默认值，不换行

wrap 换行

3.5 align-items 设置侧轴上的子元素排列方式（单行）

flex-start 从上到下

flex-end 从下到上

center 挤在一起居中（垂直居中）

stretch 拉伸（默认值）

3.6 align-content 设置侧轴上的子元素的排列方式（多行）

flex-start 默认在侧轴的头部开始排列

flex-end 在侧轴的尾部开始排列

center 在侧轴中间显示

space-around 子项在侧轴平分剩余空间

space-between 子项在侧轴现分布在两头，在平分剩余空间

stretch 设置子项元素高度平分父元素高度

3.6 align-content 和 align-items 区别

• align-items 适用于单行情况下，只有上对齐、下对齐、居中和拉伸
• align-content 适应于换行（多行）的情况下（单行情况下无效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性
• 总结就是单行找align-items 多行找align-content

3.7 flex-flow

• flex-direction:设置主轴的方向
• justify-content：设置主轴上的子元素排列方式
• flex-wrap：设置子元素是否换行
• align-content：设置侧轴上的子元素排列方式（多行）
• align-items：设置侧轴上的子元素排列方式（单行）
• flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap

4.1 flex属性

4.2 align-self 控制子项自己在侧轴上的排列方式