故心故心故心故心小故冲啊
文章目录
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;
}