07 css高级技巧

日嗯任
157 阅读5分钟

精灵图

为什么需要精灵图

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

目的 ： 所以，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了css精灵技术 （也叫 css雪碧 ， css sprites）

使用

精灵图的核心是 ： 精灵图主要针对背景图片使用，就是把多个小背景图片整合到一张大图片中 。

就是说 ： 精灵图是一个大图片，那么我们可以移动背景图片的位置，然后就可以选中所要使用的精灵图了

移动的距离就是 这个目标图片的x轴和y轴 ，往左，往上都是负值

image.png

image.png

使用字体图标 iconfont

字体图标的产生和优点

本质 ： 字体 font- ； 可以更改颜色，大小等

主要用于 显示网页中通用常用的一些小图标

优点 ：

  • 轻量级 ： 一个图标字体要比一系列的图像要小， 一旦字体加载了，那么图标就会马上渲染出来，减少了服务器的请求

  • 灵活性 ： 本质其实是文字，可以很随意的改变颜色，产生阴影，透明效果，旋转等

  • 兼容性 ： 几乎支持所有的浏览器，可以放心使用

注意 ： 字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化

所以 ： 若碰到样式和结构都简单的图标就用字体图标；若遇到结构和样式复杂一点的图片 就使用精灵图

使用字体图标

网站 ： iconfont-阿里巴巴矢量图标库 免费 ！！！

  • 添加入库使用 可以选择 添加入库
image.png

image.png

image.png

点击添加至项目 ，你可以 自己创建库，或者是放到之前创建的库中

image.png

CSS三角

使用 css 直接画出 三角形

image.png

给div 分别设置边框的颜色

image.png

所以 画出三角形 就可以把其余三个变成透明即可

image.png

给 border 都设置为透明，10px 然后设置朝下指的颜色为pink

image.png

若想让三角形变大，那么设置border的px即可

image.png

image.png

根据一开始的图就可以看出，朝右指 image.png

image.png

CSS用户界面样式

界面样式 ：就是更改一些用户操作样式，以便更好提高用户体验

更改用户的鼠标样式 cursor

语法 ： li {cursor : 属性}

属性有 ：

default ： 小白箭头 默认
pointer ： 小手
move ： 移动
text ： 文本
not-allowed ： 禁止

default 小白箭头

image.png

pointer 小手

image.png

move 移动的图标

image.png

text 文本

image.png

not-allowed 禁止的图标

image.png

表单轮廓 outline

取消表单的轮廓线 可以 使用 outline

outline : 0
或者
outline : none

image.png

image.png

点击之后，就无蓝色的轮廓线了

image.png

防止表单域拖拽 resize

在没有设置表单域时，表单域是可以进行拖拽的

image.png

用这个 可以进行拖拽大小，但我们不想让他进行拖拽 就使用 resize

image.png

image.png

vertical-align 属性应用

使用场景 ： 经常用来设置图片和表单（行内块元素）和文字垂直对齐

它用于设置一个元素的垂直对齐方式，只针对行内元素或者行内块元素有效

语法 ：

vertical-align ： baseline | top | middle | bottom

属性 ：

baseline ： 默认，元素放置在父元素的基线上
top ：把元素的顶端与行中最高元素的顶端对齐
middle  ：把此元素放置在父元素的中部
bottom ：把元素的顶端与行中最低元素的顶端对齐

image.png

baseline 默认放到基线上

image.png

image.png

top 放到 顶端

image.png

image.png

middle 放到中线

image.png

image.png

bottom 放到底线

image.png image.png

解决图片底侧空白缝隙

image.png image.png

可以看出 底部是有缝隙的 ，是因为 默认 baseline 是基线对齐的，所以我们如果想要解决的话

  • 设置 vertical-align ： top | middle | bottom 即可
  • 给 img 设置为 display ： block 因为 vertical-align 只对行内和行内块元素有效

溢出的文字省略号显示

单行文本溢出 显示省略号

满足文本溢出显示省略号的三个条件有 ：

1、让文字在一行内显示 white-space : nowrap (不换行) | normal （换行  默认)

2、让 溢出的部分隐藏 overflow ：hidden

3、让文字溢出的时候用省略号显示  text-overflow ：ellipsis（省略号）
image.png

image.png

多行文本溢出 显示省略号 (了解)

有较大兼容性 ，适合于 webKit浏览器或者移动端 (移动端大部分是 webKit内核)

image.png

image.png

布局技巧

margin负值的运用

让每个盒子 margin 往左侧移动 -1px 正好压住相邻盒子边框

image.png

设置 鼠标经过某个盒子时，让当前盒子边框颜色改变

  • 加相对定位 因为相对定位会保留位置

image.png

  • 若有定位 ，则加z-index 给层级即可

文字围绕浮动元素

给 图片的div 添加 float：left

image.png image.png

因为 给设置 float：left 那么不会压住标准流的内容，而且文字会围绕着浮动来显示的

行内块的巧妙运用

行内块元素的特点 ： 在一行上面显示，可以设置宽度高度，若给父盒子设置 text-align：center 那么就可以给一行里面的所有行内块元素都会实现 center 对齐的

image.png image.png

image.png

css三角强化

image.png image.png

css 初始化

因为 不同的浏览器对有些标签的默认值是不同的，所以为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对css初始化

也就是说 ，对css重新设置

把所有的内外边距清零
* {
    margin : 0 ;
    padding : 0;
}
avatar
文章
阅读
粉丝