⭐元素显示与隐藏⭐省略号显示⭐精灵图⭐滑动门⭐

CSS高级技巧

1. 元素的显示与隐藏

• 目的

  让一个元素在页面中消失或者显示出来

• 场景

  类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！

1.1 display 显示（重点）

• display 设置或检索对象是否及如何显示。

  display: none 隐藏对象
  
  display：block 除了转换为块级元素之外，同时还有显示元素的意思。
  

• 特点： 隐藏之后，不再保留位置。

实际开发场景：

配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛

1.2 visibility 可见性 (了解)

• 设置或检索是否显示对象。

  visibility：visible ; 　对象可视
  
  visibility：hidden; 　  对象隐藏
  

• 特点： 隐藏之后，继续保留原有位置。（停职留薪）

1.3 overflow 溢出(重点)

• 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出内容否，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

实际开发场景：

1. 清除浮动
2. 隐藏超出内容，隐藏掉, 不允许内容超过父盒子。

1.4 显示与隐藏总结

属性	区别	用途
display	隐藏对象，不保留位置	配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛
visibility	隐藏对象，保留位置	使用较少
overflow	只是隐藏超出大小的部分	1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围

2. CSS用户界面样式

• 所谓的界面样式， 就是更改一些用户操作样式，以便提高更好的用户体验。
  • 更改用户的鼠标样式 (滚动条因为兼容性非常差，我们不研究)
  • 表单轮廓等。
  • 防止表单域拖拽

2.1 鼠标样式cursor

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

属性值	描述
default	小白 默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

鼠标放我身上查看效果哦：

<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.3 防止拖拽文本域resize

实际开发中，我们文本域右下角是不可以拖拽：

<textarea  style="resize: none;"></textarea>

2.4 用户界面样式总结

属性	用途	用途
鼠标样式	更改鼠标样式cursor	样式很多，重点记住 pointer
轮廓线	表单默认outline	outline 轮廓线，我们一般直接去掉，border是边框，我们会经常用
防止拖拽	主要针对文本域resize	防止用户随意拖拽文本域，造成页面布局混乱，我们resize:none

3. vertical-align 垂直对齐

• 有宽度的块级元素居中对齐，是margin: 0 auto;
• 让文字居中对齐，是 text-align: center;

但是我们从来没有讲过有垂直居中的属性。

vertical-align 垂直对齐，它只针对于行内元素或者行内块元素，

vertical-align : baseline |top |middle |bottom 

设置或检索对象内容的垂直对其方式。

• 注意：

  vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，

  特别是行内块元素， 通常用来控制图片/表单与文字的对齐。

4.3 总结三步曲

  /*1. 先强制一行内显示文本*/
      white-space: nowrap;
  /*2. 超出的部分隐藏*/
      overflow: hidden;
  /*3. 文字用省略号替代超出的部分*/
      text-overflow: ellipsis;

6. 滑动门

先来体会下现实中的滑动门,或者你可以叫做推拉门：

滑动门出现的背景

核心技术

核心技术就是利用CSS精灵（主要是背景位置）和 盒子padding撑开宽度, 以便能适应不同字数的导航栏。

一般的经典布局都是这样的：

<li>
  <a href="#">
    <span>导航栏内容</span>
  </a>
</li>

css样式

* {
      padding:0;
      margin:0;

    }
    body{
      background: url(images/wx.jpg) repeat-x;
    }
    .father {
      padding-top:20px;
    }
    li {
      padding-left: 16px;
      height: 33px;
      float: left;
      line-height: 33px;
      margin:0  10px;
      background: url(./images/to.png) no-repeat left ;
    }
    a {
      padding-right: 16px;
      height: 33px;
      display: inline-block;
      color:#fff;
      background: url(./images/to.png) no-repeat right ;
      text-decoration: none;
    }
    li:hover,
     li:hover a {
      background-image:url(./images/ao.png);
    }

总结：

1. a 设置 背景左侧，padding撑开合适宽度。
2. span 设置背景右侧， padding撑开合适宽度 剩下由文字继续撑开宽度。
3. 之所以a包含span就是因为 整个导航都是可以点击的。

7.2 CSS三角形之美

 div {

 	width: 0; 

    height: 0;
    line-height:0；
    font-size: 0;
	border-top: 10px solid red;

	border-right: 10px solid green;

	border-bottom: 10px solid blue;

	border-left: 10px solid #000; 

 }

一张图， 你就知道 css 三角是怎么来的了, 做法如下：

1. 我们用css 边框可以模拟三角效果
2. 宽度高度为0
3. 我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了
4. 为了照顾兼容性 低版本的浏览器，加上 font-size: 0; line-height: 0;