目录
一、精灵图
1.1 为什么需要精灵图
一个网页中往往应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度。
因此,为了有效减少服务器解释和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(也称CSS Sprites、CSS雪碧)。
核心原理:将网页中的一些小背景图像整合到一张大图中,这样服务器只需要一次请求就可以了。
1.2 精灵图(spirtes)的使用
使用精灵图核心:
- 精灵技术主要针对于背景图片的使用,就是把多个小背景图片整合到一张大图片中
- 这个大图片也称为 sprites 精灵图 或者 雪碧图
- 移动背景图片的位置,此时可以使用 background-position
- 移动的距离就是这个目标图片的x和y坐标,注意网页中的坐标有所不同(x轴右边走是正值,左边走是负值,y轴下边走是正值,上边走是负值)
- 一般情况下都是往上往左移动,所以数值是负值
- 使用精灵图的时候需要精确测量,每个小背景图片的大小和位置。
二、字体图标
2.1 字体图标的产生
字体图标使用场景:主要用于显示网页中通过,常用的一些小图标。
精灵图的优点很多,但是缺点也很明显
- 图片文件还是比较大的
- 图片本身放大和缩小会失真
- 一旦图片制作完毕想要更换非常复杂
此时,有一种技术的出现很好的解决了以上问题,就是字体图标 iconfont
字体图标可以为前端工程师提供一种方便高效的图标使用方式,展示的是图标,本质属于字体。
2.2 字体图标的优点
- 轻量级:一个图标字体比一系列的图像要小,一旦字体加载了,图标就会马上渲染出来,减少了服务器的请求。
- 灵活性:本质其实是文字,可以很随意的改变颜色,产生阴影,透明效果,旋转等
- 兼容性:几乎支持所有的浏览器
总结:
- 如果遇到一些结构和样式比较简单的小图标,就用字体图标。
- 如果遇到一些结构和样式复杂一点的小图片,就用精灵图。
2.3 字体图标的下载
推荐下载网站:
1.icomoon字库
2.阿里iconfont字库
三、CSS画三角
网页中常见一些三角形,使用CSS直接画出来即可,不必做成图片或者字体图标。
.box2 {
width: 0;
height: 0;
line-height: 0;
font-size: 0;
border: 50px solid transparent;
border-top-color: pink;
margin: 100px auto;
}
四、CSS用户界面样式
所谓的界面样式,就是更改一些用户操作样式,以便提高更好的用户体验。
- 更改用户的鼠标样式
- 表单轮廓
- 防止表单域拖拽
4.1 鼠标样式 cursor
li {cursor:pointer;}
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
属性值 | 描述 |
default | 小白 默认 |
pointer | 小手 |
move | 移动 |
text | 文本 |
not-allowed | 禁止 |
4.2 轮廓线 outline
给表单添加outline:0;或者outline:none;样式之后,就可以去掉默认的蓝色边框。
input, textarea {
/* 取消表单轮廓 */
outline: none;
}
textarea {
/* 防止拖拽文本域 */
resize: none;
}
4.3 vertical-align属性应用
- 使用场景:经常用于设置图片或者表单(行内块元素)和文字垂直对齐。
- 官方解释:用于设置一个元素的垂直对齐方式,但是它只针对于行内元素或者行内块元素有效
vertical-align:baseline | top | middle | bottom
值 | 描述 |
baseline | 默认,元素放置在父元素的基线上 |
top | 把元素的顶端与行中最高元素的顶端对齐(顶线对齐) |
middle | 把此元素放置在父元素的中部(中线对齐) |
bottom | 把元素的顶端与行中最低的元素的顶端对齐(底线对齐) |
解决图片底部默认空白缝隙问题:
bug :图片底侧会有一个空白缝隙,原因是行内块元素会和文字基线对齐
解决方案:
- 给图片添加vertical-align:middle | top | bottom 等。(提倡使用的)
- 把图片转换为块级元素 display:block;
4.4 溢出的文字省略号显示
4.4.1 单行文字省略号显示
单行文本溢出显示省略号-必须满足三个条件:
/* 1.先强制一行内显示文本 */
white-space: nowrap; /*默认是normal 自动换行 nowrap是强制一行显示文本*/
/* 2.超出的部分隐藏 */
overflow: hidden;
/* 3.文字用省略号替代超出的部分*/
text-overflow: ellipsis;
4.4.2 多行文本溢出显示省略号
多行文本溢出显示省略号,有较大的兼容性问题,适合于webKit浏览器或移动端(移动端大部分是webKit内核)
overflow: hidden;
text-overflow: ellopsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient : vertical;
更推荐让后台人员来做这个效果,因为后台人员可以设置显示多少个字,操作更简单。
五、常见布局技巧
巧妙利用一个技术更快更好的布局:
5.1 margin负值的应用
- 两个盒子加边框1px,浮动,贴紧会出现 1px + 1px = 2px
- 给右边盒子添加
margin-left: -1px(相当于两个盒子层叠起来,右边盒子的边框浮动到左边盒子上)
- 正数向右边走,负数向左边走
1.让每个盒子margin往左侧移动 -1px 正好压住相邻盒子边框
2.鼠标经过某个盒子的时候,提高当前盒子的层级即可(如果没有定位,则加相对定位(保留位置),如果有定位,则加z-index。
5.2 文字围绕浮动元素
巧妙运用浮动元素不会压住文字的特性。
将文字占满整个盒子,然后给图片添加左浮动,再调整样式即可。
5.3 行内块巧妙运用
页码在页面中间显示:
-
把这些链接盒子转换为行内块,之后给父级指定
text-align: center
-
利用行内块元素中间有缝隙,并且给父级添加
text-align: center
,行内块元素会水平居中
5.4 CSS 三角强化妙用
1.将border-bottom,border-left宽度值改为0px
2.再使用border-top宽度值等于某一合适值撑开盒子
3.将border-top值颜色值改为透明,则可以得到右下角梯形。
width: 0;
height: 0;
/* 把上边框宽度调大 */
/* border-top: 100px solid transparent;
border-right: 50px solid skyblue; */
/* 左边和下边的边框宽度设置为0 */
/* border-bottom: 0 solid blue;
border-left: 0 solid green; */
/* 1.只保留右边的边框有颜色 */
border-color: transparent red transparent transparent;
/* 2. 样式都是solid */
border-style: solid;
/* 3. 上边框宽度要大, 右边框 宽度稍小, 其余的边框该为 0 */
border-width: 100px 50px 0 0 ;
最终效果: