元素的显示和隐藏
display 显示与隐藏
属性值：
none 隐藏对象
block 显示元素
display隐藏元素之后不占有原来的位置，后期经常与js在一起连用。
visibility 显示与隐藏
visibility属性用于指定一个元素的显示与隐藏
属性：
visible 元素可见
hidden 元素隐藏
使用visibility:hidden;来隐藏元素时，元素仍然占有原来的位置
overflow 溢出显示与隐藏
overflow: visible; 不剪切内容也不添加滚动条
overflow: hidden; 将超出盒子的内容隐藏掉
overflow: scroll; 不管盒子里面的内容有没有超过父盒子的高度，都显示滚动条
overflow: auto; 超过盒子的高度显示滚动条，不超出则不显示
CSS其他技巧
精灵图
为什么要用精灵图
多张小的图片整合到一张大的图片例返回给浏览器，避免重复请求，减轻服务器的压力。
精灵图的使用步骤
1、获取所需要的小图标大小
2、设置一个盒子来放我们需要的小图标，尺寸和我们所需的小图标大小一致
3、background-image：url（）；将背景图片引入盒子
4、利用background-positionlai 来调整背景图片的位置，以显示我们所需要的图标，注意，x和y轴的像素值一般都是负值，最大是0
输入框删除外框
代码 outline:none;
文本域取消拖拽
代码 resize:none;
鼠标样式
属性及样式
对齐方式
vertical-align目的：为了让行内元素或者行内块元素按照不同的方式来进行对齐。
文字的各个线的说明
vertical-align属性可以设置元素的对齐方式
vertical-align: baseline； 基线对齐（默认）
vertical-align: bottom; 底线对齐
vertical-align: middle; 中线对齐
vertical-align: top; 顶线对齐
备注：
图片的底部有空白的原因：图片默认是和文字保持基线对齐，所以下方的空白是为了给文字底部预留的空间
想让图片与文字沿中线对齐，可以使直接使用vertical-align: middle;来实现
CSS三角制作
制作三角的步骤
1、设置边框的宽度，样式，颜色设置为透明
2、将所需要的边框的颜色设置为所需的颜色即可
CSS省略号的制作
步骤
1、将文字强制一行显示
2、将超出盒子的文字给切掉
3、将切掉的文字用省略号来代替
CSS滑动门制作
步骤：
1、a标签来实现精灵图的左边
2、span标签来实现精灵图的右边
3、指定padding来撑开盒子即可
|
