1.CSS 常用技巧 1.1 margin 负值
制作网页时，为了拉开元素之间的距离，常常给元素设置大于0的外边距margin。其实，在实际工作中，为了实现一些特殊的效果，经常需要将元素的margin设置为负值，如下图所示的元素重叠效果。
注意技巧：
1.定位的盒子层级高于浮动和标准流。
2.提高定位盒子的层级用 z-index。
1.2 css三角的写法易迅、网易三角的做法：
京东三角的做法：
综合做法：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> div { width: 0; height: 0; margin: 100px auto; border-width: 10px; /* 数值控制三角大小 */ border-color: #f00 transparent transparent transparent; /* 上 右 下 左 模式 */ /* transparent透明 背景颜色默认也是透明的 */ border-style: solid dashed dashed dashed; /* dashed 是为了照顾ie6 灰色底的问题 */ overflow: hidden; /* ie6 高度问题 */ } </style> </head> <body> <div></div> </body> </html>效果展示：
1.3 给网页添加ico图标首先自己或者网页美工制作小图标。 利用 http://`/ 进行转换 生成的是： favicon.ico 的小图标
注意路径哦！ 1.4 关于logo 的优化(建议)1.一般情况下，logo给的是背景图片
我们要在logo里面放一个h1标签，就是为提权，说明这个盒子很重要。
我们继续在h1 里面放一个链接a 要和 logo盒子一样大。
注意 a链接 里面要放上网站标题。（是为了优化）
链接里面的文字对用户体验不好，这里不需要看见。 有两种方法实现：
利用text-indent:-2000em; 或者 利用padding 挤开盒子 并且overflow 切割
给链接添加 title 提示文本 增强用户体验。
2. CSS 常见bug 2.1 IE6及更早浏览器浮动时产生双倍边距的BUG？所谓的IE6双倍边距就是指当元素有float属性，又有margin属性时，在IE6下面显示的margin的值是设置值的两倍。这个是IE6比较著名的BUG。 解决的方法就是_display:inline。
2.2 IE6下元素最小高度的问题在IE6下面，如果想给把元素例如div设置成19像素以下的高度设置不了。这是因为IE6浏览器里面有个默认的高度 iE6下这个问题是因为默认的行高造成的,解决的技巧也有很多,例如:overflow:hidden;height:1px;font-size:0;line-height:0; 都可以。
2.3 IE7及更早浏览器下当li中出现2个或以上的浮动时，li之间产生的空白间隙的BUG？vertical-align:top;
除了top值，还可以设置为 middle | bottom 等都可以
2.4 IE6中奇数宽高的BUGIE6还有奇数宽高的bug，解决方案就是将外部相对定位的div宽度改成偶数。
2.5 了解ie6盒子会撑高的特性ie下面的盒子， 即使你给与了宽度和高度，但是内容超过大小的时候，盒子还会撑大，解决方法就是添加overflow:hidden;
学IT，上博学谷 感谢博学谷老师们强大的技术储备
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签： #css常见问题技巧 #1css #常用技巧11 #margin #2提高定位盒子的层级用
