CSS-07-高级技巧

一、元素的显示与隐藏

1.1 display

• 隐藏之后，不再保留位置

1.2 visibility可见性

• 隐藏之后，继续保留原有位置

1.3 overflow溢出

• 保证盒子里面的内容不会超出该盒子范围

二、CSS用户界面样式

2.1 鼠标样式cursor

• pointer：小手

2.2 轮廓线outline

• 去掉，none

2.3 防止拖拽文本域resize

• 不可拖拽：none

三、vertical-align垂直对齐

3.1 图片与文字的对齐

• 只针对于行内元素与行内块元素
• 控制图片与文字的对齐

3.2 去除图片底侧空白缝隙

• 原因：图片的底侧默认和父盒子的基线对齐
• 解决方法：不要和基线对齐或者转换为block

四、溢出的文字省略号显示

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

五、CSS精灵技术sprite

• CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图）
• 推荐使用Fireworks

六、滑动门

• a标签里面放span
• a使用左侧背景，span使用右侧背景
• 之所以a包含span就是因为 整个导航都是可以点击的

七、扩展

7.1 margin负值之美

• margin=-1，可以压住相邻盒子的边框
• 通过调整定位层级，可以使边框高亮

7.2 CSS三角形之美

• 不需要的边框，颜色改成transparent