【九月打卡】第10天 前端工程师2022版 浮动与定位第一讲

课程名称：前端工程师2022版

课程章节：浮动与定位

课程讲师： elex

课程内容：

大纲

    第一部分

        浮动：

            浮动的基本概念

            使用浮动实现网页布局

            BFC规范与浏览器差异

            清除浮动

    第二部分   

        定位

            相对定位

            绝对定位

            固定定位

    第三部分

        小慕医生项目开发实战

2-1 浮动的基本概念

    作用：最基本的 = 用来实现并排显示

    float：left,reight,

    浮动的使用要点：

        1.一旦设置浮动，并排的盒子都要浮动

        2.要保证父元素的宽度足够，否则盒子会掉下去

    注意！！

        1.同排显示的盒子，一个浮动都要浮动

        2.父元素的宽度要 ≥ 浮动的盒子宽度和

    浮动的顺序贴靠特性

        子元素在父元素内浮动时，子元素们会按照顺序依次贴靠；

            如果没有足够的空间，就会寻找前一个元素进行贴靠；

    注意！！浮动的元素一定能设置宽高，不论块级元素或行内元素

        浮动的元素脱离了标准文档流，一律能设置宽高

    右浮动：

        float：right；

            按着顺序反着来："3 → 2 → 1"

2-2 使用浮动实现网页布局

    注意点！！

        垂直显示的盒子不要显示浮动，并排显示的盒子才设置浮动！！！

        浮动不能继承！！！

2-3 BFC规范与浏览器差异

    BFC = box formatting context,会计格式化上下文

        页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素

        是一个盒子的稳定状态

        使浏览器的渲染达到一种隔离独立的效果

    注意！！！一个height如果不设置宽高，那么当它的子元素都浮动时，该盒子将无法被撑起

    如何让盒子形成BFC(四种方法)

        1.让元素进行浮动，float ≠ none；

        2.给盒子设置定位，给盒子设置成绝对定位或者固定定位，position ≠ static/relative

        3.给设置display属性，"display = inline-block、flex、inline-flex"

            inline-block：行内块

        4.使用"overflow：hidden"属性

        例子参考”2-3的html代码演示“

    什么是"overflow：hidden"

        表示溢出隐藏

            会使溢出盒子边框的内容将会被隐藏起来

        可以让盒子形成BFC

    BFC的作用：

        1.取消margin在竖直方向上的塌陷

        2.可以阻止元素被浮动的元素覆盖

    浏览器差异：

        IE6、7使用haslayout机制，与BFC有点不同

        IE使用"zoom：1"的属性使盒子拥有layout(布局)，本质的现象和BFC差不多

        如果要制作兼容到IE6、7的网页时，尽量让页面布局变得简单，内部有浮动的盒子要注意设置height属性，规范编程，属性设置要科学合理

2-4 清除浮动

    原因：

        浮动要封闭在一个盒子里面，否则会对页面的后续元素产生影响

    方法：

        1.内部有浮动的盒子形成BFC，使能够关闭内部的浮动。最好的方法是给浮动元素的父元素设置"overflow：hidden"

        2.给后面的父元素设置"clear：both"，claer表示清楚浮动对自己的影响，both表示左右浮动给都清除

            副作用：因为盒子还是没有高度的，margin会失效

        3.楚浮动的元素设置一个类名，在类名后面，使用伪元素"：；after"，给盒子添加最后一个元素，并给该属性设置"clear：both"

            注意要把对应的元素转成块级元素再设置该属性

            注意伪元素要加content属性

        4.在两个父盒子之间隔一堵墙，隔一个携带“clear：both”的盒子

            注意此时div的margin依然失效

            此时想给盒子设置margin可以采用公共类的效果

2-5 讨论：

    1.为什么要使用浮动？

        更好地实现页面布局，

        让块级元素也可以并排显示等，更好地利用页面空间

    2.为什么要清除浮动？

        不清除浮动的话，浮动就会被封闭在一个盒子里面，会对页面的后续内容的展现产生影响

        清楚浮动可以使盒子形成BFC，解决了margin竖直方向上塌陷的问题

    3.清除浮动的方法有哪些？各自优缺点？

        归根到底，是让盒子形成BFC

        1.给浮动元素的父元素设置:overflow：hidden属性

        2.给后面浮动元素的父元素设置clear：both属性，清除浮动产生的影响

            缺点：因为此时的盒子如果没有设置宽高的话，div为0，margin会失效

        3.给浮动元素的父元素转换为块元素并添加伪类：：after，对伪类添加clear：both属性

        4.在浮动元素之间再设置一个div。建一堵墙，对这墙设置clear：both属性

            缺点：因为此时的盒子如果没有设置宽高的话，div为0，margin会失效，但是可以采用公共类的方法使页面更美观

    4，根据场景选择清除浮动的方式？

        IE6、7浏览器使用haslayout机制，要设置"zoom:1"属性使盒子拥有布局

        之后的浏览器，在浮动元素较少的情况下可以采用二、四种方法，但要注意margin失效的问题

        较常用的是第三种伪元素的方法，注意要将元素转换为块元素再添加伪类

            或者给浮动的父元素设置overflo：hidden属性

3-1 相对定位

    盒子相对自己原来的位置进行调整位置，这叫做相对定位

        position：relative；

        //在这下面添加位置信息

        top、left、right、bottom

            这些数值的值可以是负数

        想象成四角坐标系，在（0，0）这个位置

    相对定位的性质：

        会在原来的位置占个坑，本质上还在那里，不过浏览器渲染在其他位置，等同于影子，不会对页面上的其他元素产生影响

        相对定位是不脱离标准文档流的；

        不影响是指，就算渲染到了其他元素的位置，也不会影响该元素在页面上的位置

    相对定位的用途：

        1.会留坑所以不能进行太大的位置变动，主要用于微调元素位置。

        2.可以当作绝对定位的参照物

3-3 绝对定位(一)

    定义：

        盒子可以在浏览器里面以坐标进行位置精准描述，拥有自己的绝对位置

            position：absolute；

             //在这下面添加位置信息

                top、left、right、bottom

                这些数值的值可以是负数

    绝对定位是在浏览器中，以坐标的形式，进行移动

    相对定位：以原来的位置进行移动

    绝对定位：以浏览器为准，看位置描述词定位起始点

    绝对定位的元素是脱离标准文档流的，会释放原来的位置，对其他元素不会产生干扰，而是会对它们进行压盖

    脱离标准文档流的方法：

        浮动、绝对定位、固定定位

    绝对定位的盒子不是永远以浏览器为基准点的，一般会以自己祖先元素中，离自己最近的拥有定位的元素为基准点

        = 子绝父相  "子元素绝对定位，父元素相对定位"

    绝对定位的盒子垂直居中：

        position：absolute；

        top：50%；

        margin-top：-自己高度的一半；

    定位的盒子水平居中：

        position：absolute；

        left：50%；

        margin-left：-自己宽度的一半；

    堆叠属性：z-index属性

        用于设置绝对定位元素的压叠顺序

            是一个没有单位的正整数，数值大的能压住数值小的

    绝对定位的用途：

        1.制作“压盖”、”遮罩“的效果

        2.结合JS制作动画

3-8 绝对定位(二)

    案例演示：轮播图制作

3-9 固定定位

    定义：不管页面如何卷动，永远固定在那里(以浏览器为参考)

        position：fix；

         //在这下面添加位置信息

            top、left、right、bottom

            这些数值的值可以是负数

        固定定位：只能以页面为参考点，没有子固父相的概念

        固定定位，脱离了标准文档流，没有其他参考点

        用途：

        返回顶部、楼层导航等图标的制作

3-13 几种定位的应用场景有哪些？

    1.几种定位之间的区别？

        a.相对定位：以原来的位置为基准点进行移动，移动是视觉效果上的移动，实际占位还在原地，是不脱离标准文档流的移动，对文档中的其他内容没有影响

        b.绝对定位：一般是以浏览器或者该元素的祖先元素中离自己最近的有定位的元素为基准点进行移动，移动是整个移动，在原来的位置不占位了，脱离了标准文档流，对文档中的其他内容没有影响

        c.固定定位：无论其祖先元素有没有基准点，都以浏览器为基准点，脱离了标准文档流，对文档中的其他内容没有影响

        区别主要在在于：有无脱离标准文档流的、以什么为基准点、移动之后在文档流中是否还占据位置

    2。举例某种定位的应用场景

        固定定位：主要用于页面返回顶部，页面导航栏的设置等

        相对定位：因为会在页面上"留坑",不能有太大的位置移动，主要用来对元素进行微调；作为绝对定位的参照物(子绝父相)

        绝对定位：用来制作"压盖""遮罩"等效果；结合CSS精灵使用；结合JS制作动画效果

3-14 margin传递问题

    1.margin的塌陷：

        是指竖直方向上的margin会产生塌陷，两个盒子之间的margin数值不会进行叠加，而是取大值

    2.margin的传递现象：

        父元素嵌套子元素，子元素设置margin时，父元素的位置会受到影响被带动

        方法一：

            给该元素的父元素设置边框border

            要注意元素的尺寸，设置时要注意边框的颜色和父元素一致，可以通过border的"transparent"将其设置为透明

        方法二：

            给子元素设置浮动

            设置浮动的话，要注意浮动是否影响了布局

        方法三：

            给父元素设置浮动

            设置浮动的话，要注意浮动是否影响了布局

        方法四：

            给子元素设置absolute定位(子绝父相)

            最好给父元素设置相对定位，方便子元素的布局设置

4-1 项目实战

4-15 自由编程部分

5-1 课程总结

    1.使用浮动要注意什么？浮动有哪些性质？

        浮动时要注意父盒子有足够的宽度；要浮动都浮动；

        浮动会顺序贴靠，优先贴靠上一个浮动元素的边；浮动会使元素脱离标准文档流；不论是行内元素还是块级元素，一旦浮动，都可以设置其宽高

    2.如何清除浮动？

        一个盒子本身就不涉及清除浮动的话题，只用添加"overflow：hidden属性"使该盒子形成"BFC规范"

        clean:both

        ::after

        隔墙

    3.定位的类型？分别有什么功能？

        相对定位：微调元素位置，相对元素原来的位置进行调整，会在原来的位置留坑，形影分离的问题；可以看作是绝对定位的参考盒子(子绝父相)

        绝对定位：相对整个网页或者是就近的相对定位的父盒子进行定位(子绝父相)；用来制作压盖或者遮罩的效果

        固定定位：主要用于页面返回顶部，页面导航栏的设置等，无论页面如何滚动都不会移动改变位置

    课程难点

        BFC：box formatting context 块级格式化上下文

            页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

        如何创建BFC?

            1.浮动了就是BFC

            2.只要定位不是相对定位或者不进行定位，就能创建BFC

            3.display：inline-block、flex、inline-flex

            4.overflow：hidden(最常用)

        BFC的作用：

            清除浮动；取消盒子竖直方向上的margin塌陷；阻止元素被浮动的元素覆盖

        绝对定位如何实现垂直居中？

            top：50%；

            margin-top：-1/2*height;（负的高度的一半）

            //水平居中同理

课程收获：

谢谢老师，讲的非常细致，很容易懂。