css小技巧

display的显示与隐藏（隐藏后不在占有位置）：

display:none;(隐藏元素)
display：block；（除了转换为块状元素以外，还可以显示元素）

visibility的显示与隐藏（隐藏后保留位置）：

visibility：hidden（隐藏元素）
visibility:visible(显示元素)

overflow溢出

显示与隐藏总结

属性	区别	用途
display	隐藏对象，不保留位置	下拉菜单，原来没有，鼠标经过显示下拉菜单
visibility	隐藏对象，保留位置	使用较少
overflow	只是隐藏超出大小的部分	1.可以清除浮动 2.保证盒子里面的内容不会超过该盒子范围

用户界面鼠标样式

轮廓线outline

取消表单的轮廓性

input { outline:none; }

防止拖拽文本域

resize: none;

行内元素，行内块元素图片文字垂直居中(vertical-align)

其默认为基线对齐（baseline）,如果想让文字中线和图片中线对齐，则为

vertical-align:middle ;

还有top,buttom操作。

去除图片底侧空白缝隙（因为默认是基线对齐，所以有空隙）当然vertical-align对块状元素不起作用，所以不会有基线对齐也不会有空白间隙。清除的方法有二：

1.将图片和文字的对齐方式改为top或buttom。

2.将元素类型转换为块状元素

溢出的文字省略号显示（三步曲）：

1.先强制一行内显示文本 white-space:nowrap;

2.超出的部分隐藏 overflow:hidden;

3.文字用省略号替代超出的部分 text-overflow:ellipsis;

css精灵技术（主要针对于背景图片）：

步骤：
1.要精确测量，每个小图标的大小和位置。

2.给盒子给定大小后，背景定位基本上都是负值。

制作精灵图时，尽量使其摆放在同一列，这样x轴就不需要测量，并且图标与图标之间要有间隙，最后的图片格式要保存为.png

滑动门（为了自适应元素中文本内容的多少）（以前当导航栏中的字数不一样多时，用padding撑开，在不给宽度的前提下）

margin负值之美

1.当多个div在一起时边框难免会出现重叠现象，这个时候可以用margin负值来解决。例如margin-right: -1px;
2.当鼠标经过边框变色并显示可以将其进行定位，因为定位是最上方的（相当于将该盒子升起），并且要用相对定位，因为其是占位置的
3.当都有定位想让其盒子升起时，用z-index；

CSS三角形小标记

步骤：
1.宽高都为零
2.四个边框都要写不能省略，可以将不用的三角颜色设为transparent
3.为了兼容性还要加上font-size:0; line-height:0;