CSS第七天——display、visibility、overflow、鼠标样式、表单轮廓线、vertical-align、margin负值、溢出省略号、精灵图、三角形

显示与隐藏

display
　　　display:none;　　　隐藏　不占位
　　　display:block;　　　隐藏的元素显示出来
visibility
　　　visibility:hidden;　　隐藏　占位
overflow
　　　overflow:hidden;　　溢出隐藏
　　　scroll
　　　auto

总结　overflow:hidden

超出内容隐藏
父子级外边距塌陷时　　父加overflow:hidden
清除浮动　　　　　　　父加overflow:hidden

用户界面-鼠标样式　　cursor

小白（默认） 　　　　　　cursor:default;
小手　　　　　　　　　　　cursor:pointer;
移动（四方向箭头）　　　　cursor:move;
文本（Ｉ型）　　　　　　　cursor:text;
禁止（一个圈，中间斜杠）　cursor:not-allowed;

用户界面-轮廓线

表单元素选中时蓝色边框　去掉
　　　　　　　outline:none;
textarea 文本域禁止拖拽
　　　　　　　resize:none;

vertical-align

行内元素　与　行内块元素
a、span　　　　img、input

（１）图片和文字垂直对齐
vertical-align:middle;　　基线对齐
若无效，父级加行高

（２）去除图片底侧留白
vertical-align:middle/top;
display:block;

溢出的文字省略号显示

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

精灵图　雪碧图

减少对服务器的请求压力
background:url(图片路径) no-repeat X轴 Y轴；

滑动门

父级　转成行内块的a　　放左侧圆角
子级　span　　　　　　放右侧盒子，装内容
父级　默认背景图片　　　padding-left
子级　右对齐背景图片　　padding-right

margin负值

margin：-1px
描边叠加，压住相邻盒子边框

三角形

盒子的宽高为0
border-style／border-width
border-color: 上边框 右边框 下边框 左边框
（不同方向三角形　其他方向transparent，相反方向设颜色）
兼容性：font-size: 0;　 line-height: 0;