01-怪异盒模型

*怪异盒模型 box-sizing: border-box IE盒模型
padding border不会撑大盒子
width = 内容区的宽度 + 左右padding + 左右border
元素的总宽度 = width + 左右margin
height = 内容区的高度 + 上下padding + 上下border
元素的总高度 = height + 上下margin

02-弹性盒

  1. 弹性盒<br />        容器 --- 父元素<br />        伸缩项目 ---- 子元素<br />        主轴 ---- 父元素设置了弹性属性后会自动生成的一根轴， 默认方向水平 从左到右<br />        侧轴 --- 垂直于主轴<br />    添加给父元素的属性：<br />    1. display: flex/inline-flex（行内弹性盒） 设置容器为弹性盒子  <br />                - 只有设置display: flex, 其他弹性盒子属性才能生效<br />                - 弹性盒子只会对子元素生效<br />                - 弹性盒子里面子元素的float , clear , vertical-align 都会失效<br />    2. flex-wrap: 项目在主轴上是否换行<br />                    nowrap 不换行 默认<br />                    wrap   换行<br />                    wrap-reverse 换行并且反向<br />    <br />    3. flex-direction: 主轴的方向<br />                        row 默认  水平 从左到右<br />                        row-reverse 水平 从右到左<br />                        column 垂直  从上到下<br />                        column-reverse 垂直  从下到上<br />    4. flex-flow: flex-wrap flex-direction <br />                  wrap  column<br />    5. justify-content: 项目在主轴上的对齐方式<br />                        flex-start 默认 项目在主轴的开始位置排列<br />                        center   项目在主轴的中间的位置排列<br />                        flex-end  项目在主轴的结束位置排列<br />                        * space开头的属性都是对空间进行处理，要求元素在主轴方向上必须有剩余空间才能生效<br />                        space-around   容器两边有间隙，中间的间隙是两边的2倍<br />                        space-between   容器两边没有间隙，中间的间隙平分<br />                        space-evenly  所有的间隙平分<br />    6. align-items： 项目在侧轴的对齐方式<br />                        flex-start  在侧轴的开始位置排列<br />                        center  在侧轴的居中位置排列<br />                        flex-end  在侧轴的结束位置排列<br />                        baseline  基线对齐<br />                        stretch 默认  拉伸以适应侧轴的空间<br />    7. align-content: 多行项目在侧轴的对齐方式<br />                        stretch 默认 拉伸以适应侧轴空间<br />                        flex-start 在侧轴开始位置<br />                        flex-end 在侧轴的结束位置<br />                        center 侧轴的居中位置<br />                        space-around 容器两边有间隙，中间间隙是两边的二倍<br />                        space-between  容器两边没有间隙，中间间隙平分<br /> --><br /> <!-- <br />    元素水平垂直居中6<br />    display: flex;<br />    justify-content: center;<br />    align-items: center;<br />  -->

03-弹性盒子的属性

  1. align-self: 元素自身在侧轴的对齐方式
    auto 默认值 继承父元素的align-items的属性值，如果父元素没有align-items, 就会找align-items的默认值
    stretch 拉伸
    flex-start
    center
    flex-end
    baseline
    2. flex-grow 元素在主轴上的扩展比例
    !要求： 主轴上必须有剩余空间
    0 1 2 3 4
    默认 0 不分配空间 不扩展
    3. flex-shrink 元素在主轴上的收缩比例
    !要求： 容器的宽度必须小于项目的总宽 （主轴是水平方向）
    0 1 2 3 4 5
    默认 1 收缩
    0 不收缩
    4. flex-basis 元素在主轴上的基准值
    项目在主轴上如果没有设置flex-basis, 会参考width, 如果width没有，由内容撑开
    auto 默认 项目参考width,如果width没有，由内容撑开
    数值
    百分比 参考父元素的值
    5. flex:
    flex-grow flex-shrink flex-basis
    1 0 20px
    平分空间
    flex:1
    flex-grow: 1
    flex-shrink: 1
    flex-basis: 0
    成比例进行缩放
    flex: auto
    flex-grow: 1
    flex-shrink: 1
    flex-basis: auto
    flex: none
    flex-grow: 0
    flex-shrink: 0
    flex-basis: auto

04-多列

多列
column-count 分为几列
column-width 每列的宽度
column-gap 列和列之间的间距
column-rule 列和列之间的分隔线
语法和border相同
column-span 是否横跨所有列
none 默认 不横跨
all 横跨
column-fill 列的高度是否统一
balance 默认 列的高度以最高一列统一
auto 自适应