float浮动，定位

Posted 2021-02-10 zs-book1

1 浮动定位
    1、普通流定位
        普通流，由称为文档流
        块级元素：从上到下一个一个的排列
        行内元素：一行内从左到右的排列
    2、浮动定位
        2.1、什么是浮动定位
        将元素排列在普通流之外，即脱离文档流
        浮动元素不会占据页面空间
        浮动元素会放置在“包含框”的左边或右边
        浮动元素依旧位于包含框之内
        浮动元素可以向左或向右浮动，知道碰见包含框的边缘或另一个已浮动的元素框为止
        2.2、特点
            1、浮动元素边缘不会超过器父元素的边缘
            2、浮动元素不会重叠
            3、浮动知道左右浮动，不会上下浮动
            注意：非块级元素浮动的话， 将会变成块级元素，允许修改width和height
        2.3、处理问题
            1、让块级元素在同一行内显示
            2、修改行内元素的width和height
        2.4、浮动属性
            属性：float
                取值：
                none
                left
                right
            清除浮动所带来的影响：
            属性：clear
            取值：left
                right
                both
        2.5、子级元素的浮动，伪复层元素所带来的影响
            如果一个元素的所有子级内容都是浮动的，那么他的高度就会变成0
            解决方案
            1、设置父容器高度
            2、设置父元素的overflow：hidden；
            3、在父元素中，增加一个空元素，添加clear：both；
2、显示方式
    2.1、display
        none：生成元素没有框，不占据页面空间，隐藏
        block：按块级显示
        inline：按行内方式显示
        inline-block：行内快，所有的元素在一行内显示，允许修改width和height
    使用场合：
        1、控制元素的显示与隐藏
            隐藏：display：none
            显示：
                块级：display：block；
                行内：display：inline；
        2、将行内元素变成块级或行内块
        目的：修改行内元素的宽和高
    2、显示效果
        2.1、visibility
        可见性
        取值：
        visible：默认的，可见的
        hidden：元素不可见，占据页面空间

        问题：visibility：hidden 占据页面空间与display：none的区别 不占据页面空间
        2.2、opacity
            透明度
            取值：0-1
            opacity：0.5；
        3、vertical-align
        垂直方向对齐
        td
        img
            取值：
            baseline：默认，基线对齐
            top：顶部对齐
            bottom：底部对齐
            middle：居中对齐
            放在img上，控制的是img左右两端文本的垂直对齐方式
        4、光标
            改变鼠标的显示效果
            属性：cursor
            取值：
            default
            pointer：小手
            crosshair：+
            text：I
            wait：等待
3、相对定位
    3.1、什么是相对定位
    元素框会相对与他原来的位置偏移某个距离
    3.2、如何用
     position：relative
    left：尺寸
    right：尺寸
    3.3、什么时候用
    元素本身位置的微调
    配合绝对定位使用
4、绝对定位
    4.1、定义：脱离文档流 不占据页面空间
    4.2、初始位置
    相对与最近的已经定位的元素 那么参考位置相对于body进行定位
    4.3、如何使用
    position：absolute；
    4.4、使用场合
    弹出菜单