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;