六、css高级技巧，元素的显示与隐藏，多余的字，弹性布局，精灵图

六、css高级技巧

1、元素的显示与隐藏

（1）display设置或检索对象是否及如何显示

①display：none; 隐藏对象

②隐藏后不占位置

③通过display：block;可以显示元素

（2）visibility 设置或检索是否显示对象

①visibility：visible；对象可见，这是默认值，不写也是

②visibility：hidden；对象隐藏

③隐藏后，位置继续保留（仍然占据之前的位置）

（3）overflow溢出

①overflow：visible；不剪切内容也不添加滚动条

overflow：hidden；不显示超出部分，超出部分剪切隐藏

②overflow：auto；超出自动显示滚动条，不超出不显示

  overflow：scroll；不管超出不超出都显示滚动条

（4）opacity 透明度 

opacity：0.5；  0 完成透明，但页面中是存在的   1完全不透明

（5）transparent(隐藏)

2、CSS用户界面样式

（1）鼠标样式（样式可以也写在CSS中）

<ul>

<li style="cursor:default">这是默认 一个白色 鼠标</li>

<li style="cursor:pointer">鼠标放在文字上是 小手</li>

<li style="cursor:move">鼠标放在文字上是 移动样式</li>

<li style="cursor:text">我是文本</li>

<li style="cursor:not-allowed">鼠标是禁止符号</li>

</ul>

（2）轮廓线

input：focus{ outline:0； } 0 none

3、行内块（图片和表单等）与文字对齐方式

设置图标和文字在同一水平线，使用vertical-align：middle；

基线对齐;   vertical-align:baseline;

顶部对齐:   vertical-align:top;

底部对齐:    vertical-align:bottom;

去除图片底侧空白缝隙：

使用顶部对齐，或转为块级元素display：block；

4、多余文字设置省略号

①text-overflow：clip; 超出部直接剪切掉

②text-overflow：ellipsis;超出部分以省略号显示

③white-space: nowrap;文字不换行

（1）多行文本溢出：

.box{

     /* 1. 文字显示不开，是否开启换行   nowrap：不换行*/

white-space: nowrap;

/* 2. 超出的隐藏 */

overflow: hidden;

/* 3. 文字溢出的时候，用省略号显示 */

text-overflow: ellipsis;

}

（2）单行省略号

.box{

     overflow: hidden;

     text-overflow: ellipsis;

      /* 弹性伸缩盒子模型显示 */

     display: -webkit-box;

      /* 限制在一个块元素显示的文本的行数 */

     -webkit-line-clamp: 3;

      /* 设置或检索伸缩盒对象的子元素的排列方式 */

      -webkit-box-orient: vertical;

}

（3）css精灵技术（sprite）雪碧图

多个小图标集中一张图片上，通过对图片进行定位，达到显示效果，一 个请求，多处使用background-position:值1 值2 ;进行定位(x,y)左 上角开始；向上 向左移动为负；