css高级表现属性

display
    display:inline；转换为行内元素
    display:inline-block；转换为行内块元素
    display：block；转换为块元素
                    让隐藏元素显示
    display：none；隐藏元素，不占位

蒙层效果的做法：
    1>定义div.box
    2>定义.box子元素div.box1 box1中加入需要显示蒙层的内容
    3>将.box1定位至.box处
    4>给div.box1设置display：none；
    5>设置鼠标滑过时显示蒙层：.box:hover .box1{display:block;}

visibility 隐藏元素
    visible 默认元素显示
    hidden  隐藏元素，占位

overflow 设置元素内容超出盒子部分如何显示
    visible 默认超出部分正常显示
    hidden  超出部分隐藏 隐藏部分不占位
    scroll  强制显示滚动条
    auto    内容超出时显示滚动条 内容不超出时不显示
  overflow-x 水平方向
  overflow-y 垂直方向

怎样做文本溢出部分用省略号显示：
    1>固定容器宽度；
    2>强制文本不换行 white-space：nowrap；
    3>溢出部分隐藏 overflow：hidden；
    4>溢出部分用省略号显示 text-overflow：ellipsis；

transform 设置或者检索字体图标的缩放和旋转
    缩放：
        transform：scale（n）；水平和垂直方向均缩放
        transform：scale（x,y）x代表水平方向的缩放 y代表垂直方向的缩放
        设置字体图标的缩放：
            x，y取值：
                1 不缩放
                0-1 缩小
                >1 放大
    旋转：
        rotate（数值+deg）设置图标的旋转 deg旋转的角度
    注意：transform不支持行内元素，需要转换成块元素或者行内块元素才会生效。
    transform是一个复合属性：
        transform：scale（） rotate（）；

二级菜单的做法：
    1>做导航栏 div.head中添加ul>li>a结构
    2>划哪个li出现二级菜单 就给这个li添加一个子元素div.menu
    3>给div.head添加相对定位position：relative；
    4>给子元素div.menu添加绝对定位position：absolute； display：none；偏移量调整位置。
    5>设置划过显示二级菜单效果：.head ul li:hover .menu{display:block;}

注意：添加fonts图标后 行高会被撑大2-3px

通栏轮播图做法：
    1、定义div.banner{w：100%；h： px；}
    2、定义图片ul结构和分页器ol结构 并且将ul和ol用锚点链接进行链接
    3、给ul下的每个li下的a标签添加背景图 a标签转换为块元素 手动设置宽高
       背景图设置不平铺 调整位置水平居中
    4、给ul添加overflow：hidde：（不能加给banner 否则分页器会被隐藏）
    5、给banner设置相对定位，给ol设置绝对定位，垂直方向位移量有具体数值直接量取，
       水平方向位移量left：50%；margin-left：-数值px；数值取值为分页器ol宽度的一半。