05.css

Author：逸云先生
发布时间：October 15, 2019
1975 views
No comments
3489 words
Categories： Css笔记

浮动：
    定位：  
        定义元素框相对于其 正常位置 应该出现的位置
        位置可以是相对于自身、父级元素位置、其他元素以及浏览器窗口本身的位置。
        1，文档流定位 
            元素默认的排列方式
                块元素 独占一张从上往下
                行内元素 在一行显示从左往右
        2，浮动
        3，相对定位
        4，绝对定位
        5，固定定位
    浮动：  
        解决的问题？块元素在一行内显示的问题
        让元素脱离文档流
    属性：
        float:
            left  左浮动
            right 右浮动
    浮动问题？
        1，浮动元素是脱离文档流（不占据空间）
        2，浮动只能往左浮动（向包含框左上角飘）或者右浮动（包含框右上角飘）
            或者停靠在已经浮动元素的边缘上
        3，浮动元素一定要有包含框（父元素，确定浮动元素位置）
        4，浮动元素默认不会换行，除非包含框宽度不足以放下所有的浮动元素（后面的元素就会换行）
        5，浮动元素的高度最好保持一致，如果不一致，可能 会卡主 浮不上去
        6，如果多个块元素需要在一行内显示，一定要全部都浮动
        7，元素一旦浮动后，就会变成块元素（脱离文档流的元素会变成块元素）
        8，元素一旦浮动 那么的他的宽度就会变成自适应
    
    浮动造成包含框高度塌陷问题？
        什么时候产生：
            当一个父元素里面的所有子元素都浮动，且父元素没有设置高度，这个时候由于浮动元素脱离文档流，所有造成父元素中没有内容撑开高度
        清除浮动带来的影响
         clear      不是真正的解决问题，只是解决布局混乱的问题
            值：
                left 清除元素 左浮动所带来的影响
                right 清除元素右浮动所带来的影响
                both 清除元素左右浮动带来的影响
            加给谁：谁的布局错了就加给谁
    清除浮动方法：解决 包含框高度塌陷的问题
        1，手动设置包含框的高度
        2，overflow:hidden 撑开父元素高度
        3，父元素 内部最后 加一个空的块元素 这是clear:both
            内容生成：
                :bofore  
                通过css向一个元素 内部最前面 作为第一个子元素插入一个元素
                .box:bofore{
                    content:"";
                    display:table;
                }

.box:after{
                    content:"";
                    display:block;
                    clear:both;
                }

定位：
    文档流定位（静态定位）
    相对定位 
    绝对定位
    固定定位
    属性：
        position:
            static 静态定位 （文档流定位）
            relative 相对定位
            absolute 绝对定位
            fixed 固定定位
        定位元素？
            何为定位元素：position属性为relative、absolute、fixed
        元素定位后？
            只是让元素可以移动了，真正实现元素位置的移动，需要配合位移属性
        位移属性：
            left 
                距离定位基点 左边的距离 
                    正值 往右跑 负值 往左跑
            right
                距离定位基点 右边的距离 
                    正值 往左跑 负值 往右跑
            top
                 距离定位基点 上边的距离 
                    正值 往下跑 负值 往上跑
            bottom
                 距离定位基点 下边的距离 
                    正值 往上跑 负值 往下跑
        值：
            px
            百分比（定位基点宽度或者高度百分比（相对定位是基于自身宽高百分比））
                常用语绝对定位
        注意：
            一般水平方向和垂直方向位移属性一个方向只有一个
            如果left right同时出现 以left为准
            top和bottom同时出现以top为准
        
        相对定位：
            定义基点：
                基于当前元素未移动前的位置
            注意：
                相对定位 未移动前的位置 他移动后还依然占据着，没有脱离文档流
            使用场景：
                01，微调元素位置
                    （margin给负值  相对定位）
                02，配合绝对定位
        绝对定位：
            left 距离定位基点最左边的距离
            right 距离定位基点最右边距离
            top 距离定位基点最上面距离
            bottom 距离定位基点下面的距离
        定位基点：
            距离最近的已经定位的祖先元素 如果没有默认是html/body
            什么是定位元素：
                元素是相对定位绝对定位或者固定定位
                一般定位基点都是加 相对定位
            注意：  
                绝对定位会让元素脱离文档流不占据页面空间，且会变成块元素，宽度会变成自适应
        使用场景：  
            常用于各种弹出框
            页面布局
        
        鼠标移入控制一个元素的样式，这个被控制的一定是的他的后代元素
        绝对定位的位移属性取值为百分比
            基于定位基点宽/高百分比
        绝对定位元素的宽高取值为百分比：
            也是基于定位基点元素宽高百分比
        
        固定定位：
            定位基点：页面可视区
            其他的跟绝对定位一样
            也会脱离文档流，也会变成块元素，宽度也是自适应
        使用场景：
            网页侧边栏

pc端布局：
            盒子模型 +浮动 +定位

Last modification：July 17, 2022