H5-前端学习-08

        哈喽，各位小伙伴，我们会更新一些前端的文章，想学习前端的小伙伴，特别是0基础的小伙伴，或者对此感兴趣的小伙伴，可以关注我，我会保持更新。

置换元素：有自己的宽度高度，根据属性和属性值，浏览器渲染出其类型
            置换元素就是行内块元素：inline-block
            例如：img,input,select和textarea也是置换元素
        非置换元素：除了置换元素外

        定位：让元素去某一个位置，或者相对于某一个元素进行位置的改变
            属性：position：
            取值
            1.静态定位：
                static(默认值)------元素正常显示，该怎么显示就怎么显示，即使配合位移属性，元素位置也不会发生变化
            2.相对定位：
                relative：相对于原来的位置进行位置的改变（让元素位置发生微调，不会影响到其他元素）
            3.绝对定位：
                absolute：
                父子关系中
                1.子元素添加绝对定位，父元素没有定位,子元素参照浏览器窗口左上角进行位置的改变（位置的偏移）
                2.子元素添加绝对定位，父元素有定位，（通常使用相对定位，父相子绝）,子元素参考父元素位置进行改变（位置偏移）
                    绝对定位元素会找到最近的定位元素（除了静态定位外），进行位置的改变
            4.固定定位：
                fixed：元素相对于浏览器窗口进行定位（位置的改变），只显示在窗口范围内，不受滚动条的影响
                    应用场景：返回顶部，广告，楼梯层效果
            5.黏性定位：
                sticky：常用来实现吸顶效果
            位移属性：
                top/right/bottom/left(水平方向只取一个值使用，垂直方向同理)
                给正值时向元素中心方向移动，负值向元素四周扩散

            定位带来的影响：
                1.相对定位带来的影响
                    多个元素同时相对定位，后面定位元素会覆盖前面定位元素，想要调整层级关系，需要调整层级属性z-index
                    层级属性：z-index：数值（默认值auto，效果等于0，数值越大层级越高，可以取正值，也可以取负值）
                2.多个元素同时添加绝对定位：
                    1)元素添加绝对定位脱离文档流，在页面中不占位置，后面补位元素会自动补位 <div id="box1">
        
                    2)多个元素同时添加绝对定位，最后面的定位元素显示在最上面，想要调整层级，需要使用层级属性,
                        z-index:数值（只能应用在定位元素上）
            
                浮动与定位
                    浮动：
                        浮动元素半脱离文档流，后面元素有文本内容，会实现文本环绕效果
                    绝对定位：
                        绝对定位元素完全脱离文档流，后面补位元素有文本内容，不会实现文本环绕效果
                    相同点：
                        1.如果后面补位元素中没有文本内容，实现效果是一样的
                        2.都能触发BFC机制，形成独立的区域
                        3.都能将元素转换成块元素
                        4.添加margin:0 auto不生效，因为脱离了文档流
                        5.给宽度自适应元素添加浮动或绝对定位，元素宽度变为由内容撑开的宽度自适应
                元素实现水平垂直居中：
                    1.元素在浏览器窗口实现水平垂直居中
                        元素添加绝对定位/固定定位均可
                        div{
                            width: 400px;
                            height: 400px;
                            background-color: pink;
                            position: fixed;
                            top: 50%;
                            margin-top: -200px;
                            left: 50%;
                            margin-left: -200px;
                        }
                    2.元素在容器中实现水平垂直居中
                       父元素添加相对定位
                        .inner{
                            width: 200px;
                            height: 200px;
                            background-color: red;
                            position: absolute;
                            top: 50%;
                            margin-top: -100px;
                            left: 50%;
                            margin-left: -100px;
                        }
                锚点：在当前页面不同区域内进行跳转，就是锚点
                    应用场景：通讯录，小说章节
                    语法：
                        <a href="#锚点名"></a>
                        <div id="锚点名"></div>                        
                透明：
                    应用在背景属性上：
                        1.rgba(red,green,blue,alpha)(0.255,0-1)
                        2.transparent
                        3.opacity：数值（0-1，0：透明；1：不透明）
                        在IE低版本浏览器中需要添加兼容（ie9以下）