布局笔记

布局        默认文档流：            从上到下            从左到右        布局规则：            先进行行级布局，再进行列级布局
    1》display        inline        block        inline-block    2〉浮动        float：left/right
        特点：            不会遮盖文字            设置给块级元素时，块级元素的宽度不会独占一行            设置给行内元素：可以设置宽高属性
        

            

            

            

            

            

            

        

        清除浮动：            clear:left/right/both        1.给浮动元素和非浮动元素之间手动添加一个块级元素        2.通过伪元素选择器，给所有浮动元素的父级元素使用:after{            content:’’;            display:block;            clear:left        }
        浮动何时停止？        1.遇到父元素边框停止浮动        2.遇到其他浮动元素时停止浮动
    3>定位布局        position:            static：静态布局            absolute:绝对定位:                特点：                1.默认脱离文档流                2.不保留定位前空间                3.默认情况下，绝对定位元素根据body左上角进行定位                4.当父元素具有定位属性时，子元素根据父元素左上角进行定位
            relative:相对定位            特点：                1.根据元素本身所在的位置进行定位                2.不脱离默认文档流                3.保留定位前空间            fixed:固定定位                特点和绝对定位相似                使用了固定定位的元素，不会随着滚动条的滚动而滚动            sticky:粘滞定位                relative+fixed

配合属性：            left            top            right            bottom

外边距合并问题：        父子级：            1.给父元素添加边框属性            2.将本应该设置给子元素的margin设置给父元素的padding            3.给父级或者子级添加float属性            4.给父级或者子级添加position: absolute;            5.给父元素或者子元素添加display: inline-block;            6.给父级元素添加overflow: hidden;                    兄弟级：