css中的浮动布局&定位布局&flex布局（伸缩盒布局）！！！

一、浮动布局

• float ( 如果一个元素添加float属性，那么这个元素就会成为一个浮动元素 )

        left                向左浮动元素

        right              向右浮动元素

        none           【默认值】，不浮动

        inherit           浮动方式继承父元素

 

• 浮动元素的特点

        当一个元素是浮动元素的时候，它会失去对父元素的支撑

• 清除浮动

        1. 给父元素添加overflow : hidden;

 

         2. 使用伪元素   : : after

---

二、定位布局

position

        static               静态（默认）               非定位元素

        relative           相对定位                      定位元素

                               相对的是元素原先的位置，
                       
                               不脱离文档流
                       
                               可以覆盖在其他元素上

        absolute          绝对定位                        定位元素

                                相对的是距离它最近的父定位元素的位置，如果没有父定位元素，那么它相对于浏览器视口

                                 脱离文档流（不占据原先的位置）

        fixed                 固定定位                         定位元素

                                相对于浏览器视口

                                 脱离文档流

                                 不会随着浏览器的滚动而滚动

        sticky                粘滞定位                   定位元素

                                不脱离文档流

                                使用top、right、bottom、left设置一个过渡点，当超过这个过度点的时候就会体现fixed固定在页面上

默认文档流的特点：默认宽度由内容决定，不占据原先的位置（原先的位置被其他元素抢占）

---

三、flex布局 ( 伸缩盒布局 )

flex布局

        ① 任何一个容器都可以指定为flex容器

                采用Flex布局的元素，成为Flex容器，它的所有字元素成为Flex项目

                容器默认存在两根轴：水平的主轴和垂直的交叉轴

        ② 当我们为父盒子设为flex布局后，子元素的float、clear属性即将失效

        ③ 给父元素设置display：flex，达到控制子元素的目的

常见父项（容器）属性

        flex-direction : 设置主轴的方向

                 row(默认值):主轴为水平方向，起点在左端

                 row-reverse：主轴为水平方向，起点在右端

                 column：主轴为垂直方向，起点在上沿

                 column-reverse：主轴为垂直方向，起点在下沿

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

                 flex-start：左对齐

                 flex-end：右对齐

                 center：居中

                 space-between:两端对齐，项目之间的间隔都相等

                 space-around:每个项目两侧间隔相等，
        
                所以，项目之间间隔比项目与边框的间隔大一倍

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

                nowrap(默认):不换行

                 wrap:换行，第一行在上方

                 wrap-reverse:换行，第一行在下方

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

                 flex-start:与交叉轴的起点对齐

                 flex-end：与交叉轴的终点对齐

                 center：与交叉轴的中点对齐

                 space-between：与交叉轴两端对齐，轴线之间平均分布

                 space-around：每根轴线两侧的间隔都相等，所以，轴线之间的间隔比轴线与边框的间隔大一倍

                 stretch（默认值)

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

                 flex-start:交叉轴的起点对齐

                 flex-end:交叉轴的终点对齐

                 center:交叉轴的中点对齐

                 baseline：项目的第一行文字的基线对齐

                 stretch（默认值）：如果项目没设置高度或设auto，将占满整个容器

         flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap

                 flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

项目的属性

         order

                 该属性定义了项目的排列顺序，数值越小，排列越靠前，默认0

         flex-grow

                 该属性定义了项目的放大比例，默认0，即如果存在剩余空间，也不放大

         flex-shrink

                 该属性定义了项目的缩小比例，默认为1，即如果剩余空间不足，该项目将缩小

         flex-basis

                 该属性定义了在分配多余空间之前，项目占据的主轴空间

         flex

                 flex-grow、flex-shrink、flex-basis的速写形式