*划重点:
position:absolute 和float 会将元素的display变成block, 所以没必要同时使用,
position:relative 就没有将元素的display变成block;
position:absolut 和float:left/right 会让元素脱离流文档;
最近做阅文招聘官网,遇到一些有关浏览器兼容性的问题。
1)opacity(ie8开始就不支持)。当有这种背景遮罩的时候,我们就可以用一个小的透明的图片来平铺这个遮罩层,即是用图片而不是透明背景色来实现遮罩。同样字体颜色最好取实际的颜色,不要用透明度来调整字体颜色。
1 .ywzp-search{ 2 background: url(./images/grey.png); 3 background: rgba(0,0,0,.4); 4 height: 92px; 5 width: 100%; 6 background-size: cover; 7 position: absolute; left: 0; 8 bottom: 0; 9 }
2)一些小icon 使用svg图像的好处是高清,但是ie8以下同样不支持svg,所以ie8以下还是用图片。具体实现办法如下:
1 .inhere-playbtn{ 2 background: url(./images/inhere.png) no-repeat; 3 } 4 .inhere-playbtn{ 5 width: 36px; 6 height: 36px; 7 display: block; 8 background-position: 0px 0px; 9 margin: 14px auto; 10 cursor: pointer; 11 background: url(‘data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzYiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCAzNiAzNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+R3JvdXAgNTwvdGl0bGU+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48Y2lyY2xlIGZpbGw9IiNGRkYiIGN4PSIxOCIgY3k9IjE4IiByPSIxOCIvPjxwYXRoIGZpbGw9IiM0NTVDN0UiIGQ9Ik0xNSAyNS41NTZWMTBsMTAgNy43Nzh6Ii8+PC9nPjwvc3ZnPg==‘),none; 12 }
关于svg代码压缩和使用方法:先将icon导出成svg格式,得到一串冗长的代码,next安装压缩工具(https://github.com/svg/svgo),
命令行:svgo -f ‘原文件夹名字‘ -o ‘ 压缩到的文件夹‘,
last把压缩好的文件(将要导出的svg代码文件拖到:http://www.zhangxinxu.com/sp/base64.html),就可以得到一串如上面11行代码那样的占位符,就可以直接用了。
3)关于自适应列表的实现方法:
当容器宽度变化时候,每一个li 的宽度也会随之改变。
实例:http://output.jsbin.com/muhoyeyuzi
4)用css3画一些图形的办法和遇到的问题:
repeating-linear-gradient(45deg, blue, red); /* A repeating gradient on 45deg axe starting blue and finishing red */
repeating-linear-gradient(to left top, blue, red); /* A repeating gradient going from the bottom right to the top left
starting blue and finishing red */
repeating-linear-gradient(0deg, blue, green 40%, red); /* A repeating gradient going from the bottom to top, starting blue,
being green after 40% and finishing red */
<div id="grad2"></div>
1 #grad2 { 2 width:200px; 3 height:200px; 4 border-radius:200px; 5 background-image: repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(255,255,255,1) 25px, rgba(255,255,255,1) 50px); 6 }
当画复杂的图形的时候,里面所有的元素都必须使用绝对定位,并且以一个基线为中线来定位,实例:http://output.jsbin.com/kutoliwomu
5)没事不要将position 和z-index 一起用,就利用元素本身的先后布局来实现。
6)关于icon和字体对其:
<div class="job-chat-x"> <i class="job-chat-icon"></i> <h3 class="job-chatname">阅文招聘公众号</h3> </div>
1 .job-chat-x { 2 height: 20px; 3 padding: 25px 0; 4 } 5 .job-chat-icon{ 6 display: inline-block; 7 width: 19px; height: 19px; 8 margin-right: 10px; 9 background: url(./images/recruit.png) no-repeat; 10 vertical-align: -3px; 11 *vertical-align: 0; 12 } 13 .job-chatname{ 14 display: inline; 15 font-size: 16px; 16 font-weight: 300; 17 color: #465C7E; 18 }
通过display:inline-block;属性让元素在一行显示,如果用vertical-align:middle 实现则在ie7 下位置会有几像素的偏移,
vertical-align 是可以设置数值的。所以可以通过具体的数字来调整icon的位置,再给ie7打个补丁就可以了。
7)font-weight 可以改变字重,即字体的粗细,默认是normal。粗细为font-weight:200, 300,400 只能是正数。
未完待续....