CSS基础知识
元素的显示与隐藏
display 显示
display 设置或检索对象是否及如何显示
语法
display: none 隐藏对象
display：block 除了转换为块级元素之外，同时还有显示元素的意思
特点
隐藏之后，不再保留位置
visibility 可见性
设置或检索是否显示对象
语法
visibility：visible ; 对象可视
visibility：hidden; 对象隐藏
特点
隐藏之后，继续保留原有位置
overflow 溢出
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容
属性值及描述
visible 不剪切内容也不添加滚动条
hidden 不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll 不管超出内容否，总是显示滚动条
auto 超出自动显示滚动条，不超出不显示滚动条
CSS用户界面样式
鼠标样式cursor
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状
<ul>
<li style="cursor:default">我是小白</li>
<li style="cursor:pointer">我是小手</li>
<li style="cursor:move">我是移动</li>
<li style="cursor:text">我是文本</li>
<li style="cursor:not-allowed">我是文本</li>
</ul>
轮廓线 outline
是绘制于元素周围的一条线，位于边框边缘的外围
语法
outline : outline-color ||outline-style || outline-width
防止拖拽文本域resize
文本域右下角不可拖拽语法
<textarea style="resize: none;"></textarea>
vertical-align 垂直对齐
有宽度的块级元素水平居中对齐，是margin: 0 auto;
让元素中的文字居中对齐，是 text-align: center;
语法
vertical-align : baseline|top|middle|bottom
vertical-align不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，通常用来控制图片/表单与文字的对齐
图片、表单和文字对齐
默认的图片会和文字基线对齐
去除图片底侧空白缝隙
原因
图片或者表单等行内块元素底线会和父级盒子的基线对齐
解决方法
给img vertical-align:middle | top| bottom等等，让图片不和基线对齐
给img 添加 display：block; 转换为块级元素就不会存在问题了
溢出的文字省略号显示
/*1. 先强制一行内显示文本*/
white-space: nowrap;
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;
white-space
white-space设置或检索对象内文本显示方式，用于强制一行显示内容
white-space:normal ；默认处理方式
white-space:nowrap ； 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行
text-overflow 文字溢出
设置或检索是否使用一个省略标记（…）标示对象内文本的溢出
text-overflow : clip ；不显示省略标记（...），而是简单的裁切
text-overflow：ellipsis ； 当对象内文本溢出时显示省略标记（...）
CSS精灵技术（sprite)
为什么需要精灵技术
为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度
精灵技术讲解
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图。background-image、background-repeat、background-position属性进行背景定位