The summary of the October

Posted 2020-08-14

＊划重点：

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 只能是正数。

 

未完待续....