CSS知识总结（二）

一、CSS布局

1>. float 布局

1.子元素添加：

float: left/right/none;

2.父元素清除浮动，添加.clearfix类

.clearfix:after {
    content: '';
    display: block;
    clear: both;
 }

2> flex布局

1. 父盒子container

① flex-direction: 设置主轴方向

flow-direction: row;      /*从左到右排列1234*/
                row-reverse;     /*翻转4321*/
                column;          /*从上到下*/
                column-reverse;  /*从下到上*/

② justify-content: 主轴上的子元素排列，元素本身顺序不会代表

justify-content: flex-start;    /*贴左边*/
                 flex-end;      /*贴右边*/
                 center;        /*居中*/
                 space-between; /*先两边贴边，再平均剩余空间*/

③ flex-wrap: 设置子元素是否换行（默认不换行），如果装不下，会缩短子元素宽度

flex-wrap: nowrap;/*不换行*/
           wrap;  /*换行*/

④ align-items: 设置侧轴子元素的排列方式（子项为单行时）

align-items: flex-start;   /*从上到下*/
             flex-end;     /*从下到上*/
             center；      /*垂直居中*/
             stretch;      /*拉伸，子盒子不给高度，拉伸可使元素与父盒子一样高*/

⑤ align-content: 设置侧轴子元素的排列方式（子项为多行时）

align-content: flex-start;  /*从上到下*/
               flex-end;    /*从上到下*/
               center;      /*居中对齐*/
               space-between;/*上下贴边，再平均剩余部分*/
               space-around; /*平均剩余部分*/

⑤ flex-flow 是flex-direction和flex-wrap属性的复合属性

flex-flow: row wrap;

2. 子盒子item

① flex 定义子元素分配剩余空间，表示占多少份数

flex: 1;

② align-self: 控制单个元素

③ order: 调整顺序，默认为0

其他布局

1.rem布局

2.grid布局

有时间再补充

二、CSS定位position

1> static

属性值，待在文档流内

2> relative 相对定位

相对于自己原来的位置，还占有原来位置

3> absolute 绝对位置

如果父级没有定位，以浏览器为准 如果父级有定位，则以父盒子为准

4> fixed 固定定位

不占位置，基准是viewport