一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第6天，点击查看活动详情
要保持希望在每天清晨太阳升起 ----佚名
背景图片的移动
精灵图:主要是针对许多小背景图片，整合
到一张大图片上去
移动背景图片：background-position: ;
根据x轴和y轴来移动，横轴为x轴，越右越大，数轴为y轴，越下越大。往左/右边移动为负/正，往上/下边移动为负/正
ps:简单的小图标使用图标来制作，复杂的还是尽量用精灵图
更改鼠标样式
cursor: pointer;
| 属性值 | 描述 |
|---|---|
| default | 小白（默认） |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allowed | 禁止 |
去掉表单蓝色边框或文本域右下角虚线
- 去掉文本框自带的蓝色边框：
outline: 0/none;
- 去掉文本域右下角的虚线（去掉文本域可以被拉大的效果）：
resize: none;（文本域标签尽量放到一行上去，不要隔行）
实现图片和文字居中对齐
语法：vertical-align
| 值 | 描述 |
|---|---|
| baseline | 默认，元素放在父元素的基线上 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| middle | 把此元素放在父元素的中部 |
| bottom | 把元素的顶端与行中最低的元素的顶端对齐 |
img{
vertical-align: bottom;
/* vertical-align: baseline; */
/* vertical-align: middle;
vertical-align: top; */
}
textarea{
vertical-align: baseline;
}
ps:1处是文字与底线对齐，2处是文字与基线对齐（此处可以很明显的看出请您留言这四个字下方并没有与文本域下边框对齐，而是超出了一小部分）如果1处是与基线对齐，那么将会是这样👇👇
img{
/* vertical-align: bottom; */
vertical-align: baseline;
/* vertical-align: middle;
vertical-align: top; */
}
textarea{
vertical-align: baseline;
}
1处很明显的图片下方与文本域上边框有缝隙，这就是与基线对齐
种方法去除图片底侧缝隙还有一就是将图片转换为块级元素，这里不再过多赘述
溢出文字用省略号代替
-
单行文本省略
三个条件：
先强制一行内文本显示：
white-space: nowrap;（默认normal自动换行）超出的部分隐藏：
overflow: hidden;文字用省略号代替超出的部分：
text-overflow: ellipsis;示例如下👇👇
效果😇😇
-
多行文本省略（了解）
overflow: hidden; text-overflow: ellipsis; /*弹性伸缩盒子模型显示*/ display: -webkit-box; /*限制在一个块元素显示的文本行数*/ -webkit-line-clamp: 2; /*设置或检索伸缩盒对象的子元素的排列方式*/ -webkit-box-orient: vertical;补充一个布局技巧
像这种效果，边框随着鼠标移动而改变颜色，会用到 z-index来提高层级，具体如下
其中用到相对定位便是为了压住其他盒子，还有margin负值的巧妙运用，设为-1是为了让边框都是1px宽度，当然前提便是你要准备几个li盒子😁😁
总结：今天讲的除了多行文本的省略，都比较重要，尤其是图片和文字居中对齐和补充的布局小技巧，运用合适会有大大的妙用，各位小同学一定要好好复习哟！
好啦今天就讲到这里🤣🤣 辛苦掘金的运营小同学啦，拜拜！！🤝
