CSS-第六天（B站黑马程序员）

一、定位

1、为什么需要定位

某个元素可以自由的在一个盒子内移动位置或者固定在屏幕中某个位置，并且可以压住其他盒子。

2、什么是定位

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。

定位=定位模式+边偏移：定位模式用于指定一个元素在文档中的定位方式。边偏移决定该元素的最终位置。

定位模式position：5种值（static / relative / absolute / fixed / sticky)

边偏移：上下左右（4个属性）+偏移像素

3、五种定位方式

a.静态定位static（了解即可）

按照标准流特性摆放位置，没有边偏移，在布局时很少用到。

b.相对定位relative

1. 相对与自身原来坐标进行边偏移，移动位置参照自身原来坐标位置。
2. 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。不脱标，继续保持原来位置。

<style>
        /* 1、相对与自身原来坐标进行边偏移，移动位置参照自身原来坐标位置。 */
        /* 2、原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。不脱标，继续保持原来位置。 */
        .box1 {
            position: relative;
            top: 100px;
            left: 100px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
</style>

c.绝对定位absolute

1. 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位。
2. 如果祖先元素有定位（relative/absolute/fixed），则以最近一级有定位的祖先元素为参考点移动位置。
3. 绝对定位不再占有原先位置，脱标。

4. 子绝父相：子级是绝对定位，父级要用相对定位。相对定位经常用来作为绝对定位的父级。因为父级需要占有位置，因此是相对定位，子级不需要占有位置，所以是绝对定位。但不是一定的，如果父级不需要占有位置，那么子绝父绝也会遇到。

<style>
        /* 参照的是相对定位的最近一级祖先元素 */
        .yeye {
            position: relative;
            width: 800px;
            height: 800px;
            background-color: purple;
        }

        .father {
            width: 500px;
            height: 500px;
            background-color: skyblue;
        }

        .son {
            position: absolute;
            bottom: 0;
            left: 0;

            width: 200px;
            height: 200px;
            background-color: pink;
        }
</style>

绝对定位盒子的居中算法：绝对定位的盒子不能通过margin：0 auto水平居中。

1. 水平居中：父容器宽度一半：Left：50%；往左边移动自身宽度一半：margi-left：-自身宽度一半
2. 垂直居中：父容器高度一半：top：50%；往左边移动自身高度一半：margi-top：-自身高度一半

<style>
        .box {
            position: absolute;
            /* 水平居中 */
            /* 往右移动父级宽度的一半 */
            left: 50%;
            /* 往左移动自身宽度一半 */
            margin-left: -100px;

            /* 垂直居中 */
            /* 往下移动父级高度的一半 */
            top: 50%;
            /* 往上移动自身高度一半 */
            margin-top: -100px;
            width: 200px;
            height: 200px;
            background-color: pink;
</style>

d.固定定位fixed

固定于浏览器可视窗口。不占有位置。

固定小技巧：固定在版心的右侧。Left：50%，margin-left：版心一半宽度+距离版心像素。

<style>
        .w {
            width: 800px;
            height: 3000px;
            margin: 0 auto;
            background-color: skyblue;
        }

        .fixed {
            /* 固定定位 */
            position: fixed;
            /* 浏览器宽度的一半 */
            left: 50%;
            /* 版心宽度的一半 + 距离版心的距离 */
            margin-left: 405px;

            width: 20px;
            height: 20px;
            background-color: pink;
        }
</style>

e.粘性定位sticky（了解即可）

可以看作相对定位和固定定位的结合。作为了解，兼容性差，IE不支持。

<style>
        .nav {
            /* 兼容性差，IE不支持 */
            /* 粘性定位 */
            position: sticky;
            /* 当top距离浏览器可视窗口距离为0时，开始定位在可视窗口处，类似固定定位 */
            top: 0;

            width: 800px;
            margin: 100px auto 0;
            background-color: pink;
        }
</style>

4、五种定位方式的总结与比较 

5、定位叠放次序

定位叠放次序z-index：数值越大，盒子越靠上。如果数值相同，按照书写顺序，后来者居上。只有定位的盒子才有这个属性。

6、定位的特殊性

1. 行内元素添加绝对或者固定定位，可以设置高度和宽度。
2. 浮动元素、绝对定位、固定定位元素都不会触发外边距塌陷，即脱离标准流的元素都不会发生外边距塌陷。
3. 浮动元素只会压住下面标准流的盒子，但是不会压住下面标准流盒子里面的文字。浮动之所以不会压住文字，是因为浮动产生的目的最初是为了做文字环绕效果。绝对定位/固定定位会完全压住下面的盒子，包括文字。

二、网页布局总结

通过盒子模型，清楚知道大部分html标签是一个盒子。

一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己的专门用法。

1. 标准流：垂直的块级盒子显示就用标准流布局。
2. 浮动：多个块级盒子水平显示就用浮动布局。
3. 定位：元素自由在盒子内移动就用定位布局。

三、元素的显示和隐藏

1、dispaly（重点）

display（4种属性值）：block 转换为块级元素、显示元素 / inline 转换为行内元素 / inline-block 转换为行内块元素 / none 隐藏对象，隐藏后不占有位置

<style>
        .peppa {
            /* 隐藏元素，不占有位置 */
            display: none;

            width: 200px;
            height: 200px;
            background-color: pink;
        }
</style>

2、visibility

visibility：visible 显示元素 / hidden 隐藏元素，仍然占有位置

<style>
        .baba {
            /* 隐藏元素，仍然占有位置 */
            visibility: hidden;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
</style>

3、overflow

overflow：visible 显示元素，默认值 / auto 溢出时显示滚动条，不溢出时不显示滚动条 / hidden 隐藏溢出部分 / scroll 无论是否溢出都显示滚动条

<style>
        .peppa {
            overflow: auto;
            /* overflow: hidden; */
            /* overflow: scroll; */

            width: 200px;
            height: 200px;
            border: 1px solid #000;
            margin: 100px auto;
        }
</style>