前端 - CSS扩展

CSS文档

目录
  • 精灵图
    • 精灵图原理
    • 精灵图使用
  • 字体图标
    • 下载字体图标
  • 三角
    • 对话框
  • 用户界面样式
    • 鼠标样式
    • 表单
      • 轮廓线outline
      • 防拖拽
  • vertical-align属性
    • 图片底部默认空白缝隙问题
  • 溢出文字省略号显示
    • 单行文本溢出
    • 多行文本溢出
  • 常见布局技巧
    • margin负值去除边框叠加效果
    • 文字围绕浮动元素
    • 行内块页码
    • 直角三角形
    • CSS初始化

精灵图

核心原理是将网页中的一些小背景图整合成一张大图，这样可以有效减少服务器接收和发送请求的次数，提高页面加载速度。

精灵图原理

  1. 精灵图主要针对背景图片使用，就是把多个小背景图片整合到一张大图，这个大图被称为精灵图(sprites)
  2. 使用background-position移动背景图片位置
  3. 移动的距离为目标图片的x和y坐标
  4. 一般情况下都是往上、往左移动，所以为负值

精灵图使用

例如王者荣耀精灵图(url: https://game.gtimg.cn/images/yxzj/web201706/images/comm/index.png)

王者荣耀sprite

该图片大小为403*600像素，如果需要取出其中的“下载游戏”，html文件为一个

标签，css代码如下：

div {
    width: 240px;
    height: 130px;
    background: url(https://game.gtimg.cn/images/yxzj/web201706/images/comm/index.png) no-repeat 0 -218px;
}

效果如下：

字体图标

字体图标主要用于显示网页中的一些小图标，不使用精灵图是因为：

  1. 图片文件较大
  2. 放大缩小会失真
  3. 一旦图片制作完毕后，想要更换会比较麻烦

字体图标本质上属于文字，其优点有：

  1. 轻量级：一个图标字体比图像要小
  2. 灵活性：本质上属于文字，可以随意更改颜色、产生阴影、透明效果等
  3. 兼容性：几乎支持所有浏览器

下载字体图标

  • icomoon字库
  • 阿里iconfont字库

三角

将盒子大小设为0*0，通过改变边框的粗细和颜色就能实现三角的效果。

div {
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom-color: skyblue;
}

效果如下：

对话框

类似的，通过定位制作一个对话框。


    



.triangle {
    position: relative;
    width: 150px;
    height: 200px;
    margin: 100px auto;
    background-color: skyblue;
}

.triangle span {
    position: absolute;
    /* 注意边框宽度为20px，则盒子宽度为40px  */
    /* 向上移动三角的高度 */
    top: -40px;
    /* 水平居中*/
    left: 50%;
    margin-left: -20px;
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-bottom-color: skyblue;
}

效果如下：

用户界面样式

鼠标样式

使用cursor属性设置:

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

效果如下：

  • default
  • pointer
  • move
  • text
  • not-allowed

表单

轮廓线outline

去掉表单中标签默认的蓝色边框，outline: none;

防拖拽

使得表单中