2022.09.27

这是自学的第九天！！！冲冲冲家人们

（1）定位：

        标准文档流：块级元素会垂直排列，行内元素水平排列

        浮动实现了多个快级盒子在一排无缝排列显示

        定位：能够让我们把一个元素从它原本在正常文档流中的位置移动到另外一个位置（）

（2）相对定位

                    (相对于元素本身的位置发生移动)

                    相对于元素在正常文档流中的位置移动它，把一个正常文档流中的元素从它的默认位置按坐标进行相对移动。

                    它原本所占的空间不会变

                定位属性：position

                    取值：relative  相对定位

                    特性：

                        1、不会脱离文档流

                        2、提升层级

                        3、不定义位置偏移属性时，对元素没有影响

                    使用场景：一般搭配绝对定位使用，当做绝对定位的父级【父相子绝】

位置偏移量（坐标）

                    位置属性：

                        top     设置距离包含块顶部的距离（上）

                        bottom  设置距离包含块低部的距离（下）

                        left    设置距离包含块左侧的距离（左）

                        right   设置距离包含块右侧的距离（右）

 （3）绝对定位

    相对于定位父级的位置进行移动，如果没有定位父级，一层一层往上找（找定位父级）一直找到body，相对于body进行定位。

                语法：position: absolute;

                特性:

                    1、使元素脱离文档流

                    2、提升层级

（4） 固定定位

                元素的位置相对于浏览器的窗口进行位置移动。即使窗口是滚动的它也不会移动。

                语法：position: fixed;

                特性：

                    1、会使元素脱离文档流

                    2、提升层级

（5）静态定位

                表示将元素放在正常文档流的默认位置，html元素的默认值，也就是没有定位，遵循正常的文档流布局方式。

                语法：position: static;

                特性：

                    元素不会受到位置偏移属性的影响

                使用场景：用于重置定位属性

（6）总结

 1、相对定位对元素基本没有影响，不会改变元素本身的特性

 2、绝对、固定定位

            脱离文档流

            提升层级

            未定宽度的块级元素适应元素的内容，（不能继承父元素的宽度，手动继承 width：100%）

            可以使行内元素变成块级框

            margin值叠加问题有不同的表现

        注意：定位并不是页面布局中的主要方式，主要用于管理和微调页面中的一些特殊位置。

        可以使元素脱离文档流的属性有哪些？

            float：left；

            float：right；

            position:absolute;

            position:fixed;

        浮动和定位区别：

            浮动：使用float脱离文档流，其他的元素会无视这个元素，但是其它盒子内的文本，图片、表单元素依然会为这个元素让出位置，环绕在周围。

            定位：使用position脱离文档流，其他的元素完全无视他，包括里面的文本，图片、表单元素。

            总结：

             不同点：浮动元素脱离文档流，不脱离文本流。定位元素既脱离文档流，又脱离文本流。

             相同点：宽高默认由内容撑开，生成块级框，（可以设置宽高，并且为具备盒模型属性）

好啦，今天的分享就这么多啦！往志同道合的人一往无前，乘风破浪，共同加油！！