css第七天---css做三角形、鼠标样式 cursor、vertical-align、解决图片底侧空白缝隙、文字溢出省略号显示

一、精灵图：

减少服务器接收和发送的次数，减少服务器的压力。

使用：

• 主要针对背景图片的使用；
• 把多个小背景图片整合到一张大图上
• 借助背景位置实现background-position
• 移动的距离是目标图片在大图上x和y坐标，数值使负值；

二、css做三角形

• 1.给盒子设置宽高为0；
• 2.用border绘制透明边框；
• 3.给需要的方向的边指定颜色；
• 4.设置行高和字体为0，保证兼容性。

示例：

.box {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top-color: yellow;
  line-height: 0;
  font-size: 0;
}

三、用户界面样式

1、鼠标样式 cursor

属性	描述
default	小白箭头，默认
pointer	小手，提示用户可点击
move	移动，提示用户可以拖拽
text	文本，提示用户可以输入内容
not-allowed	禁止

2、取消表单轮廓和防止拖拽

• 取消表单轮廓 outline: one;
• textarea 禁止被拖拽 resize: none;

3、实现行内块和文字垂直居中对齐 vertical-align

用于设置图片或着表单（行内块元素）和文字对齐。

语法：

 vertical-align: baseline| top |middle | bpttom;

行内块元素默认的对齐方式是基线对齐，这种对齐方式会让图片地测留有空白缝隙。

解决图片底侧空白缝隙

• 方法一、添加vertical-align: middle| top | bottom; （推荐使用）
• 方法二、把图片转换为块级元素display: block.

4、单行文字溢出省略号显示

/* 1.强制在一行显示文本，默认normal会自动换行*/
 white-space: nowrap;
/*2. 超出部分隐藏*/
 overflow: hidden;
/*3. 超出部分用省略号代替*/
 text-overflow: ellipsis;

5、多行文本溢出省略号显示

/*1. 超出的部分隐藏 */
overflow: hidden;
/*2. 文字用省略号替代超出的部分 */
text-overflow: ellipsis;
/* 3. 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 4. 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 5. 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;

四、布局技巧

1、margin负值的运用

• 去除盒子浮动后边框两倍粗细： 让每个盒子margin向左侧移动-1px（-边框的宽度）正好压住相邻盒子的边框。
• 鼠标经过边框显示不全的问题：鼠标经过盒子的时候，提高盒子的层级（如果没有定位，则加相对定位，如果有则加z-index）。

2、行内块巧妙运用

• 把盒子转换为行内块元素，给父级指定text-align: center;
• 利用行内块元素中间的缝隙，元素会水平居中。

3、css初始化

• 重设浏览器的样式
• 不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器的呈现差异，照顾浏览器的兼容性。

---

今天你认真写代码了吗？