css中的定位属性

position:定位 可选值：

    static：默认值

    absolute：绝对定位，脱离文档流，特点：当没有父元素或者父元素没有定位的时候，

    参照物就是浏览器窗口的第一视口，当父元素有绝对定位的时候，则参照父元素定位

    relative：相对定位，不脱离文档流，相对于自己的初始位置发生偏移，

    fixed：固定定位，脱离文档流，相对于浏览器第一视口位置不发生改变

    sticky：黏性定位，脱离文档流，可以做吸顶的效果，css3新增的属性，兼容性问题

    z-index:层叠次序，整数值，值越大越优先显示，解决图层遮盖显示问题 

     

    导航里的下拉三角图标：利用边框属性来制作，三个方位设置边框，一方为颜色，另外两方为透明，不给大小，就可以实现不同朝向的三角图标

    定位控制元素的水平居中：

     position:absolute;

    top:50%;

    left:50%;

    margin-left: -自身宽度一半;

    margin-top: -自身高度一半;

    浮动跟绝对定位的区别：浮动为半脱离，有文字环绕效果，绝对定位为全脱离，不会有文字环绕效果

    锚点：a链接

    锚点作用：实现页面不同区域的跳转

    格式：<a href="#锚点名字">

          <div id="锚点名字"></div>

    精灵图（雪碧图）：将导航背景图，按钮背景图片等规则的合成一张背景图，多张图片和成一张，让后用background-position

    实现背景图的定位技术。使用的雪碧图的优势：通过整合图片减少对服务器的请求次数，，提高加载速度，可以减小图片的体积。

    宽高自适应：元素的宽度和高度大小能够根据窗口的大小自动调整；

    浮动中的高度自适应：

    高度塌陷：

    解决方法：1、给父元素写一个高度塌陷，随带问题浮动元素过多会出现换行问题

             2、 给最后加一个空元素，设置clear：both;

             3、给父元素加一个overflow：hidden；（缺点是会隐藏溢出的元素）；

             4、伪元素选择器进行，在末尾插入空标签，代码如下：

             .box::after{

                content:"";伪元素的内容为空

                clear:both; 清除伪元素前后的浮动

                display:block;将行内块元素转化成块元素

                width:0;设置宽度

                height:0;设置高度

                visibility:hidden;将内容隐藏，

             }