版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/first52hz/article/details/81451018
目录
显示与隐藏
- 单词：display，visibility
- 特点：display隐藏不保留位置，visibility隐藏保留位置
- 使用：display：block（none）；，visibility:visible（hidden）;
溢出隐藏（例如文字过多超过盒子大小）
- 单词：overflow
- 特点：对超出盒子大小的内容做出处理
- 使用：overflow：hidden；
- 属性值如下
- visible：不剪切内容也不添加滚动条（默认值）
- hidden：剪切内容
- scroll：总是显示滚动条
- auto：自动选择
鼠标样式
- 单词：cursor
- 特点：改变鼠标的样式
- 使用：cursor：default；
- 属性值如下
- default：三角鼠标
- pointer：小手鼠标
- text：文本鼠标
- move：移动鼠标
轮廓
- 单词：outline
- 特点：一般取消轮廓，用边框代替
- 使用：outline：none；
防止拖拽文本域
- 单词：resize
- 特点：在文本域textarea中使用
- 使用：textarea { resize：none； }
垂直对齐
- 单词：vertical-align（一般与行内块元素搭配使用，input，table，img）
- 特点：图片默认和基线对齐，但内容会撑开盒子，导致会有一点的缝隙（也可用display：block；）
- 使用：vertical-align：top；
- 属性值如下
- baseline：图片和文字的基线对齐（默认值）
- top：图片和文字的顶部对齐
- middle：图片和文字的中线对齐
- bottom：图片和文字的底部对齐
强制一行显示
- 单词：white-space
- 特点：让文本在一行内强制显示
- 使用：white-space：nowrap；
- 属性值如下
- normal：自动换行（默认）
- nowrap：强制一行内显示所有文本（可再加一个overflow：hidden；隐藏溢出部分）
文字溢出
- 单词：text-overflow
- 特点：以省略号结尾溢出的文字
- 使用：text-overflow：ellipsis；
- 属性值如下
- clip：剪切（默认）
- ellipsis：以省略号结尾
CSS精灵技术
- 起因：服务器接受大量的图片请求
- 目的：减少服务器的请求次数
- 方法：主要用来将零星的背景图放在一张大图的过程（来回取水果，用篮子装）
精灵图原理
- 单词：position
- 特点：定位到一张大背景图中的某个小背景图
- 使用：background：url（） no-repeat -2px -184px；
滑动门原理
- 单词：<a> <span></span> </a>
- 特点：span标签装内容，用padding-left（right）撑开文字与背景图的距离（都转换为inline-block）
- 使用：原理如上