内容概要

• 浮动
• 定位
• 两者是否脱离文档流
• 其他样式补充

内容详细

浮动

        # ps:html代码时没有缩进一说的 全部写在一行也可以
        """浮动主要就是用于页面布局的!!!"""

        # 浮动带来的负面影响
        """会造成父标签塌陷!!!"""
        解决浮动的负面影响
            1.再写一个div撑场面(不可取)
            2.关键字clear(可以使用)
            3.通用解决策略(推荐使用):只要父标签塌陷就使用
                .clearfix:after {
                    content: '';
                    clear: both;
                    display: block;
                }
                # 谁塌陷就给谁加class属性

        # 浏览器默认都是文本优先展示

定位

        1.静态定位	static
            所有的标签默认都是静态定位即不能改变位置
        2.相对定位	relative
            相对标签原来的位置做定位
        3.绝对定位  absolute  
            相对已经定位过的父标签做定位(没有则参考body标签)
                eg:小米官网导航条内购物车
        4.固定定位  fixed
            相对浏览器窗口做定位
                eg:小米官网右边回到顶部
        如何使用css完成定位  
            定位关键字position
            位置关键字left、right、top、bottom

是否脱离文档流

        # 标签位置改变之后 原来的位置是否会空出来
            如果空出来了被其他标签自动占有 那么表示脱离否则不脱离


        浮动、定位
            脱离文档流
                浮动、绝对定位、固定定位
            不脱离文档流
                相对定位

溢出属性

        # 圆形头像
        #d1 {
                    width: 200px;
                    height: 200px;
                    border: 3px solid darkgray;
                    border-radius: 50%;
                    overflow: hidden;
                }
        #d1 img {
                    /*max-width: 100%;*/
                    width: 100%;
                }

z-index属性

        # 浏览器平面不是一个二维坐标系而是一个三维坐标系
        eg:百度登录或者退出界面>>>:三明治结构(模态框)

透明度

        rgba(124,124,124,0.5)
            只影响颜色
        opacity:0.5
            影响颜色和字体