css07-css高级技巧(精灵图,滑动门...)

css高级技巧:
    1:css精灵技术(sprite)重点
        1:产生的目的
    2:滑动门(重点)
    3:元素的显示和隐藏:
        1:常见写法:
            1:display(重点)
                1:用法display:none:隐藏对象
                  display可以设置显示模式,也可以隐藏对象;
                        1:隐藏元素;
                        2:不保留位置;
                2:display:block;转换为块级元素,显示对象
                    当对象隐藏后可以用这个显示
            2:visibility(用的比较少)
                1:visibility:visible|hidden;
                2:特点:
                    1:隐藏元素,保留位置;
            3:overflow(重点)默认:visible
                1:用法:overflow:hidden;溢出隐藏(可以清除浮动)
                       overflow:scroll:溢出滚动,滚动条一直存在:从来不用,太丑了不常用
                       overflow:auto:溢出滚动,不溢出滚动,从来不用
                       overflow:visiable:溢出显示

    4:css用户界面样式
        1:更改用户鼠标样式:li配合cursor使用
            cursor:default;默认的
            cursor:pointer;小手(重点)
            cursor:move;移动
            cursor:text;文本
            cursor:not-allowed;禁止()
        2:轮廓线:
            1:outline:outline-color|outline-style|outline-width
            2:使用方式:
                outline:none;类似于list-style:none;
                button{
                    border:none;
                }

                textarea{
                    outline:none;
                    resize:none;
                    border:1px solid red;
                }

                input{
                    outline:none
                }

                li {
                    list-style:none
                }
        3:防止拖拽文本域:
            1:<textarea
            2:使用方式    textarea{
                    outline:none;
                    resize:none;
                    border:1px solid red;
                }
    5:vertical-align(行内块元素和行内元素搭配使用)
        1:只针对行内元素和行内块元素才起到效果,对块级元素无效
        2:有宽度的块级元素居中对齐:margin:0 auto;
        3:让文字居中对齐:text-align:center
        4:实现行内元素和行内块元素对齐效果:
            实现图片,文字,表单的对齐关系
        5:
            vertical-align: base-line;//基线对齐(默认)
            vertical-align: bottom;//底部对齐
            vertical-align: middle;//中线对齐
            vertical-align: top;//顶部对齐
        6:可以去除图片底部空白
            1:只要不是基线对齐就可以解决空白问题,因为行内块元素和块级元素默认是有基线对齐
            2:对块级元素来说vertical无效,所以可以将行内块元素转换为块级元素
                display:block
    6:溢出的文字隐藏
        1:溢出文字省略的做法:三步走:
            1:white-space:nowrap;//强制单行显示文本 normal(默认,自动换行)
            2:overflow:hidden;超出部分隐藏;
            3:text-overflow:ellipsis;超出部分省略号代替 clip(默认,自动裁剪)
    7:css精灵技术:(sprites雪碧)
        1:作用:为了有效减少服务器的访问次数,提高页面加载速度;
        2:本质:将多个小的背景图像,整合到一张大图中展示(精灵图,雪碧图),然后各个网页元素只需要加载雪碧图中不同位置的图片即可,
        3:使用:取坐标的负值,因为需要往反方向移动
    8:滑动门技术:
        1:背景:为了使各种特殊形状的背景能够自适应元素中文本内容的多少,就出现了css滑动门技术;
        2:实现:
            1:<a href="#">
                <span>首页</span>
             </a>
             2:步骤:
                 1:a中需要设置高度,所以先将a转换为行内块,设置高度,设置背景,设置padding-left
                 2:span中设置盖度,所以将span转换为行内块,设置高度,设置背景(位置为right top),设置padding-right

    9:margin负值之美:(positon中使用)
        1:负边距+定位:实现水平居中或者垂直居中;
        2:压住盒子相邻的边框:(原理:后面的盒子压住了之前的盒子)
            1:相邻盒子有边框导致边框很粗,这个时候可以使用margin负值;
            2:使用方式:
                margin-left:-1px;(一个border的距离)
                margin-top:-1px;
        3:突出显示某个盒子:
            1:层级:定位>浮动>标准流
            2:div:hover{
                position: relative;
                border: 1px solid red;
            }
            3:定位的盒子永远在最上层;
        4:div:hover
          p:hover
         5:如果之前没有定位,则使用定位提高层级
             如果之前有定位,则使用z-index:1;来提高层级关系

    10:css三角形之美:    
        实现方式:
            1:宽度和高度都为0;
            2:四个边框都要写,只保留需要的边框的颜色,其他边框的颜色改为transport
            3:代码:
                    width: 0;
                    height: 0;
                    border-left: 10px solid red;
                    border-top: 10px solid transparent;
                    border-right: 10px solid transparent;
                    border-bottom: 10px solid transparent;
                或者:
                    width: 0;
                    height: 0;
                    border: 10px solid red;
                    border-color: transparent transparent transparent red;
                或者:
                    width: 0;
                    height: 0;
                    border-width: 10px;
                    border-style: solid;
                    border-color: transparent transparent transparent red;
            4:为了兼容性:
                加上:
                    font-size:0;
                    line-heigh:0;

    11:实现li增加float之后宽度不够自动换行的问题:
        方法:增加父div的宽度即可;margin-right
                              margin-bottom