CSS-07-高级技巧

文章目录

  • 一、元素的显示与隐藏
    • 1.1 display
    • 1.2 visibility可见性
    • 1.3 overflow溢出
  • 二、CSS用户界面样式
    • 2.1 鼠标样式cursor
    • 2.2 轮廓线outline
    • 2.3 防止拖拽文本域resize
  • 三、vertical-align垂直对齐
    • 3.1 图片与文字的对齐
    • 3.2 去除图片底侧空白缝隙
  • 四、溢出的文字省略号显示
  • 五、CSS精灵技术sprite
  • 六、滑动门
  • 七、扩展
    • 7.1 margin负值之美
    • 7.2 CSS三角形之美

一、元素的显示与隐藏

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

你可能感兴趣的:(前端)