CSS中的定位体系

一、概述

    1、什么是定位体系

    视觉格式化模型规定，定位体系共有三种

            a.常规流（normal flow）

            b.浮动（float）

            c.绝对定位（absolute posotioned）

    任何一个元素，必须属于其中一种定位系统

二、定位体系判定

    

三、盒模型和定位体系

1、盒模型=盒子体系

    定位体系=盒子位置

2、盒模型中的尺寸

• margin：px、em、%、auto
• border：px、em
• padding：px、em、%、auto
• height：px、em、%、auto

px、em：1em=10px（盒子中的字体大小为10px）

%：尺寸是包含快尺寸的百分比，margin、padding、width的百分比是宽度的百分比

auto：尺寸受到定位体系的规则

3、常规流

    又叫普通流、文档流、普通文档器，是最常见的，默认状态下的定位

     a.常规流块盒水平方向上的居中（常用）

            step1 给块盒设宽度

                水平方向的尺寸，必须等于包含快的宽度

            step2 给块盒margin设置 ：0 auto

     b.垂直方向上居中

            若两个外边距相邻，则进行合并（折叠）

            合并:

• 两个包含块均为正值，则取最大的值
• 两个包含块均为负值，则取最小的值
• 两个包含块一正一负，则取两个值相加

            注：水平方向的外边距不会合并

4、浮动 float

        取值：float：right/left；

        清浮动，即，找回父级的高度

    

5、flex 弹性盒子

        display：flex；（在容器内增添）

        分为：容器（父元素） 项目（子元素）

    （1）容器的属性：

• direction 控制子元素的方向（行、列）
  

                    flex-direction：row；主轴为水平方向，子元素从左到右排列，为默认值

                    flex-direction：row-reverse；主轴为水平方向，子元素从右到左排列

                    flex-direction：colum；主轴为垂直方向，子元素从上到下排列

                    flex-direction：colum-reverse；主轴为水平方向，子元素从下到上排列

• wrap 换行
  

                    flex-wrap：nowrap；不换行，为默认值

                    flex-wrap：wrap；换行，第一行在上方

                    flex-wrap：wrap-reverse；换行，第一行在下方

• justify-content 主轴方向对齐方式
  

                    justify-content：center；主轴方向居中

                    justify-content：flex-end；主轴结束位置flex-end对齐

                    justify-content：flex-start；主轴起始位置flex-start对齐

                    justify-content：space-between；两端对齐，

                     即第一个项目在容器的起始位置，最后一个项目在容器的结束位置。

                    justify-content：space-around；分散对齐

                    （计算公式： (剩余空间 / 项目个数)/2得到的结果，就是每个项目的左右距离。）

                    justify-content：space-evenly；平均分散对齐

                     每个项目之间的距离相同，即平分剩余空间

                <space 对剩余空间的分配方式，剩余空间 = 容器的尺寸 - 项目尺寸之和>

• align 交叉轴方向对齐方式
  

                    一根主轴（itmes）：

                        align-items: flex-start;交叉轴起始位置flex-start对齐

                        align-items: flex-end;交叉轴结束位置flex-end对齐

                        align-items: center;交叉轴居中对齐

                        align-items: baseline;交叉轴基线对齐

                    多跟主轴（content）：

                        项目在开通换行后

                        align-content: flex-start;交叉轴起始位置flex-start对齐

                        align-content: flex-end;交叉轴结束位置flex-end对齐

                        align-content: center;交叉轴居中对齐

                        align-content: space-between;交叉轴起始和结束位置对其（上下两端对其）

                        align-content: space-around;交叉轴分散对齐

                （当容器交叉的尺寸大于各项目尺寸之和，才需要进行对齐方式的设置。）

    （2）项目的属性

                order 定义项目排列顺序，数值越小，排列越靠前，默认值为0

                flex-grow 定义项目的放大比例，默认为0，即，即使有剩余空间也不放大

                    若设值为>0，则，将按照设值的数值比例分配剩余空间

                flex-shrink 定义项目的缩小比例，默认为1，即，如果空间不足，则将项目按比例缩小

                    若一个项目为0，其余为1，则，空间不足时前者不缩小

                flex-basis 定义分派多余空间前，项目占据的主轴空间，默认为0，即，项目本来大小

                align-self 允许单个项目与其他项目不一样的对齐方式，可覆盖 align-items的属性，默认值为auto

                    表示继承父元素align-items的属性

                flex属性是这三多的缩写

                    默认值：0 1 auto；

                    快捷键

                        auto（1 1 auto）

                        none（0 0 auto）

             flex-flow，属性是flex-direction和flex-wrap属性的简写

                    默认值为 ：row nowrap；

6、绝对定位

    （1）相对位置

position：relative

            相当于盒子在原本定位体系下的位置，移动后会保留原来的位置，不影响其他元素的位置

                属于常规流

            将盒子的position属性设为relative 以启用相对位置

    （2）固定位置

            position：fixed；

• 概念：

                    1、脱离文档流（不占位置）

                     2、宽度为auto(内容的宽)

                     3、方向值 top：。。。（不给方向值，原来在什么位置，就在什么位置）

• 包含块：是视口的起始点（0,0），左上角
• 使用场景

                    1、AD（广告）

                    2、导航、页角

                    3、遮罩层（页面弹窗）

• 堆叠级别

                    默认值为0；

                    取值5以内

    （3）绝对位置

            position：absolute；

• 概念

                     1、脱离文档流（不占位置）

                     2、宽度为auto(内容的宽)

                     3、方向值（不给方向值，原来在什么位置，就在什么位置）

                     4、包含块position推荐取（relative）

• 包含块

                    看父级的position是否为static，不是则该父级为包含块

• 适用场景

                     当多个标签需要重叠展示时