元素的显示与隐藏

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

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

display 显示（重点）

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

• display: none 隐藏对象

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

• display: block 除了转换为块级元素之外，同时还有显示元素的意思。

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

visibility 可见性

设置或检索是否显示对象

visibility：visible ;  对象可视

visibility：hidden;    对象隐藏

• 特点：隐藏之后，继续保留原有位置。

overflow 溢出

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

实际开发场景：

1. 清除浮动

2. 隐藏超出内容，隐藏掉, 不允许内容超过父盒子。

显示与隐藏总结

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>

轮廓线 outline

是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

outline : outline-color ||outline-style || outline-width 

但是我们都不关心可以设置多少，我们平时都是去掉的。

最直接的写法是 ： outline: 0; 或者 outline: none;

防止拖拽文本域resize

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

用户界面样式总结

vertical-align 垂直对齐

• 有宽度的块级元素居中对齐，是margin: 0 auto;

• 让文字居中对齐，是 text-align: center;

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

设置或检索对象内容的垂直对其方式。
vertical-align : baseline |top |middle |bottom 

注意：

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

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

图片、表单和文字对齐

我们可以通过vertical-align 控制图片和文字的垂直关系了。默认的图片会和文字基线对齐。

去除图片底侧空白缝隙

原因：图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。

就是图片底侧会有一个空白缝隙。

解决方法：

• 给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐。

• 给img 添加 display：block; 转换为块级元素就不会存在问题了。

溢出的文字省略号显示

white-space

• white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容

white-space:normal ；默认处理方式

white-space:nowrap ； 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。

text-overflow 文字溢出

• 设置或检索是否使用一个省略标记（...）标示对象内文本的溢出

text-overflow : clip ；不显示省略标记（...），而是简单的裁切 

text-overflow：ellipsis ； 当对象内文本溢出时显示省略标记（...）

「注意」：

一定要首先强制一行内显示，再次和overflow属性 搭配使用

总结三步曲

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

CSS精灵技术（sprite)

CSS精灵技术（也称CSS Sprites、CSS雪碧）。

• 图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。

• 然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。

为什么需要精灵技术：为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。

精灵技术讲解

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图。

这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。

我们需要使用CSS的:

• background-image、

• background-repeat

• background-position属性进行背景定位，

• 其中最关键的是使用background-position 属性精确地定位。

精灵技术使用的核心总结

首先我们知道，css精灵技术主要针对于背景图片，插入的图片img 是不需要这个技术的。

1. 精确测量，每个小背景图片的大小和 位置。

2. 给盒子指定小背景图片时， 背景定位基本都是 负值。

滑动门

滑动门出现的背景

制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样多，咋办？

为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。最常见于各种导航栏的滑动门。

核心技术

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

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

<li>
  <a href="#">
    <span>导航栏内容</span>
  </a>
</li>
* {
    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就是因为 整个导航都是可以点击的。

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; 

     }

1. 我们用css 边框可以模拟三角效果

2. 宽度高度为0

3. 我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了

4. 为了照顾兼容性 低版本的浏览器，加上 font-size: 0; line-height: 0;