css小技巧总结(二)

这是2018-11-14号总结的关于互联网实现项目的css处理方案,现在看起来还是有所收益的

1、一般我们做多页面管理,样式表会作为外链表引入,项目页面较多时如果不加处理很容易造成样式污染,在导入方法上很讲究:

这样写的css文件中的样式只能在本组件中使用,而不会影响其他组件

​```css
<style src="../../assets/css/home.css" scoped>
</style>
​```

2、一般做电商类帮助信息题材,我们需要对文字边缘对齐处理

​```css
text-align: justify;
text-justify: kashida;
​```

3、通过伪类来模拟选项卡功能

​```css
.cell:hover,
.cell:active > .detail {
  display: block;
}
​```

4、当某些值相互依赖时,应该把它们的相互关系用代码表达出来。从而尽量减少 改动时要编辑的地方在这个例子中,行高是字号的 1.5 倍。因 此,把代码改成下面这样会更易维护:

​```css
font-size: 20px; line-height: 1.5; 
​```

5、为了避免在不同的浏览器中表现不同盒子模型的情况产生

​```css
boxing-sizing:content-box\border-box\inherit
​```
content-box说得就是w3c标准的盒模型;
border-box说的是IE怪异盒模型(ie6盒子模型)
inherit:继承父类的模型形式

6、当我们为了账户保密,需要防止自动填充密码,在chrome上较为严重,chrome会自动记录密码,通常我们会在form表单上加入autocomplete="off" 或者 在输入框中加入autocomplete="off"

7、高斯模糊是PS的一种常见的处理技巧,在做移动web,或者是H5项目时,有的UI会要求我们根据用户的头像,做成高斯模糊的头像背景

​```css
-webkit-filter: blur(2px);   /* Chrome, Safari, Opera */
filter: blur(2px);
​```
但是当加上字的时候,文字的可读性不高
可在文字书写的图层加入伪类模糊处理
​```css
body, main::before {
background: url("tiger.jpg") 0 / cover fixed;
}
main {
position: relative;
background: hsla(0,0%,100%,.3); overflow: hidden;
}
main::before { content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0; filter: blur(20px);
margin: -30px;
}
​```

8、在项目开发初期,也就是还原UI设计图的过程中,我们经常碰到到处理很多标签的原始固定的样式,虽然可以采用样式覆盖,但是需要我们碰到一个改一个,开发效率并不高,这里推荐采用css3中的一个处理办法效率极高,最佳方案:

​```css
div{resize:both;overflow:auto;}
​```

在 CSS3中,resize 属性规定是否可由用户调整元素尺寸,box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容

9、最近开发微信小程序项目中,scroll-view标签的使用体验中,在安卓机会出现一个默认的主轴滚动条,针对框架中的一些默认出现的样式,我们一般会采用class父类层级嵌套,或者直接import,但是实测很多场景下并不管用,这里不推荐使用行内标签,这是草莽做法,最佳解决方法,伪类,要善用伪类,伪类非常好用

​```css
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
​```

​```
button::after{
border: none;
}
​```
常用的伪类主要是::link、:visited、:hover、:active,我这有个巧记的方法:L-V-H-A,l(link)ov(visited)e h(hover)a(active)te,即用喜欢和讨厌两个词来概括

9、 我们一般开发PC端项目时,设计师会花很多功夫在网页logo上,那对于我们开发者而言,自己做个博客或者demo展示项目的时候,如何快速转化一般图片来当做我们的logo呢?

1. 图标的格式可以必须转化成icon;
2. 网站设计参考(www.logofree.cn/logo.html);
3. 图片转化为logo参考
4. http://www.bitbug.net/   生成的图标背景是图片的背景,图片如果为透明背景,那么生成的ico图标也是透明的

将生成的ico图标放在自己的项目文件中,然后在header标签中,写下面一句话,例如:
​```html
<link rel="shortcut icon" href="/自己的ico文件名.ico"/>
<link rel="shortcut icon" href="/favicon.ico"/>
​```

10、不知道大家平时做项目的时候有木有关注这个问题,其实之前做项目遇到过类似的问题,但是因为是单独的chrome浏览器的填充,而且是样式问题稍微严重点,也就没在意。然而在近期的项目中有遇到了这个问题,最为一个新的网站,第一次登陆或是注册就被填充,这个问题,细思极恐.

在大多数的浏览器中通常我们会在form表单上加入autocomplete="off" 或者 在输入框中加入autocomplete="off"但以上h5新加的方法并不好用,或者说chrome还部证明支持,不过提供了一个新思维,用这个方法能实现,可以加在任意一个你不想被填充的input标签内

autocomplete="new-password"

这个方法也许还有兼容性的问题,因为这个autocomplete的方法是h5新加的,所以为了效果还需加上私有属性的相关设置

    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus {
    box-shadow:0 0 0 60px #eee inset;
    -webkit-text-fill-color: #878787;
 }

强迫症们,快来感激我!

分享到此结束,如果大家有什么好的建议或者是愿意与我交流前端技术的可以给我email,邮箱地址会在首页右侧显示