css技巧总结

故心故心故心故心小故冲啊

---

---

1.元素的显示与隐藏

1.1 display 显示（重点）

实际开发场景：

配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛

1.2 visibility 可见性 (了解)

1.3 overflow 溢出(重点)

1.4 显示与隐藏总结

2. CSS用户界面样式

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

• 更改用户的鼠标样式 (滚动条因为兼容性非常差，我们不研究)
• 表单轮廓等。
• 防止表单域拖拽

2.1 鼠标样式cursor

2.2 轮廓线 outline

2.3 防止拖拽文本域resize

2.4 用户界面样式总结

3.vertical-align 垂直对齐

3.1图片、表单和文字对齐

3.2 去除图片底侧空白缝隙

给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐。
给img 添加 display：block; 转换为块级元素就不会存在问题了。

4. 溢出的文字省略号显示

4.1 white-space

4.2 text-overflow 文字溢出

4.3 总结三步曲

溢出的文字省略号显示

  /*1. 先强制一行内显示文本*/
      white-space: nowrap;
  /*2. 超出的部分隐藏*/
      overflow: hidden;
  /*3. 文字用省略号替代超出的部分*/
      text-overflow: ellipsis;

5. CSS三角形

 div {

 	width: 0; 

    height: 0;
    line-height:0；
    font-size: 0;
	border-top: 10px solid red;

	border-right: 10px solid green;

	border-bottom: 10px solid blue;

	border-left: 10px solid #000; 

 }