前端修行-JavaScript:要学js先会css

这次总结了一些css的细节,和一些使用的小技巧。

css使用细节

首先来说一些,我平时比较注意的细节、技术点,和一些大家可能不是很熟悉的知识点。

1.box-sizing: border-box

box-sizing主要有两个值content-box和border-box,先看下官方的解释:

通俗一点来说,默认情况下,padding和border是会额外占据空间的,假如元素宽是10px,如果设置了1px border边框,实际的宽就是12px,padding同理。那么这样会导致,布局的宽高不好控制,计算也特别麻烦。所以我们会给全局的元素用上border-box, 只要设置了宽高,那么border和padding无论怎么变化,元素的宽高都不会变,这样方便布局和计算。

2.左边固定 右边自适应

在布局的时候,比如一些列表页,常常左边是一个固定大小的缩略图,右边剩余部分展示标题,如图

那我们就叫左边固定右边自适应的布局吧,我的方法 100%宽的div用padding-left把左边图片的位置留出来,div元素内容的部分就是标题,图片绝对定位到padding-left区域,这样就实现了左固定右自适应,(前提是box-sizing必须是border-box,否则padding加上100%宽会超出屏幕宽度),大致代码如下:

3.伪类的 content attr

伪类before,after的content属性,是用来插入内容的,我们可以通过attr 传入一个当前元素的属性名,把属性值,载入进伪类内容,这个是一种写法,但实际应用场景可能并不多,就当了解一下吧

4.中文符号居中效果

对于动态输出文字可以不用在意,某些页面可能会有类似提示文案的地方,用英文标点符号,对于居中效果比较友好。

5.元素的上下间距

布局的时候从上往下开始写页面,一般都是写下一个的元素margin-top来决定和上一个元素的间距,那么就尽量不要又是写margin-top又是写margin-bottom,如果混着用,后期不好维护,比如某一块区域需要摞位置,或者是一个组件可能会被很多地方共用,混着写的话后期在改的时候,可能会麻烦一点,这里导致的问题可以说不痛不痒,但是不管是js还是css,注重细节并养成好的习惯,是代码能力的一种体现。

6.字体颜色透明

有时候设计师,在配置字体颜色的时候可能用透明的百分比,来设置几种不同的颜色,比如主色是#000,浅灰色#000 80%的透明度,这种情况下不建议web写透明度,而是让设计师给到对应的颜色值,因为透明色会根据背景的不同,比如现在看到的这种情况,这样扩展性就比较差。

7.命名

命名是一个让人最纠结的事情,先看第一种,这样命名的更详细可以一目了然的知道当前类的意思,但是长度比较长,增加代码量。

第二种使用缩略命名,会使代码更短,写起来更快,但是不易读。

如果用缩略命名,可以约定文档,有约定和熟悉成本,但是熟悉以后更高效,类的命名也会变得更规范和统一

8. 0.5px边框的理解误区

我之前写边框的时候就发现,只要让边框的颜色更淡,边框看起来就更细,所以当设计师问我为什么边框看起来比较粗的时候,我都告诉他们颜色调浅一点就好了,这个技巧我一直在实际使用。网上有博客说通过css3 transform的缩放scale 50%,可以实现0.5px边框,我一直很奇怪,1px实际是物理的最小单位,怎么可能实现0.5px,就这样我做了个实验,我设置了1px颜色为000的边框(黑色),如图,

当我使用scale缩放50%的时候,颜色变成了c5c5c5,但是实际仍然有1px。如图,

我用的是拾色工具会精确到像素,确实还是1px,所以这种方式并不能实现0.5px而是颜色变浅了。还有些手机屏幕上1px是按照2px来的展示,所以这种方式可以让2px缩放为1px,让1px的边框变得更淡,这种方式确实能让边框变细,但不能说是0.5px。

9.user-select:none

该属性让区域内容无法被选中,可以阻止用户长按复制,也可以避免用户复制无关内容,比如下面我只希望用户复制6655验证码,除了6655我都设置了user-select:none,长按其他部分并不会出现复制按钮,按钮数字就可以,并且第三幅图的左右下标只能在6655间拖动

10.js-class

在为dom绑定事件的时候,大家可能会直接绑定当前有样式的class,这样会因为修改或者替换class名称,影响JS,而如果定义一个无样式的js前缀的类 专门用来绑定事件,这样就解除了样式和逻辑的耦合,在读代码的时候,也能一下子看出哪些元素绑定了事件的。

正在学习前端或者感兴趣的同学可以加我的q,有全套的学习资料和视频,有问题也可以随时提问,我都会一一解答(1~5~3~0~3~5~3~6~9~3)

8种CSS 样式使用技巧

然后我们来看看平时使用css样式是的一些技巧:

假设我们的单标签是一个 div:

定义如下通用CSS:

div{

position:relative;

width:200px;

height:60px;

background:#ddd;

}

法一:border

这个应该是最最最容易想到的了

div{

border-left:5pxsolid deeppink;

}

法二:使用伪元素

一个标签,算上 before 与 after 伪元素,其实算是有三个标签,这也是很多单标签作图的基础,本题中,使用伪元素可以轻易完成。

div::after{

content:"";

width:5px;

height:60px;

position:absolute;

top:0;

left:0;

background:deeppink;

}

法三:外 box-shadow

盒阴影 box-shadow 大部分人都只是用了生成阴影,其实阴影可以有多重阴影,阴影不可以不虚化,这就需要去了解一下 box-shaodw 的每一个参数具体作用。使用 box-shaodw 解题:

div{

box-shadow:-5px0px0 0 deeppink;

}

法四:内 box-shadow

盒阴影还有一个参数 inset ,用于设置内阴影,也可以完成:

div{

box-shadow:inset5px0px0 0 deeppink;

}

法五:drop-shadow

drop-shadow 是 CSS3 新增滤镜 filter 中的其中一个滤镜,也可以生成阴影,不过它的数值参数个数只有 3 个,比之 box-shadow 少一个。

div{

filter:drop-shadow(-5px0 0 deeppink);

}

法六:渐变 linearGradient

灵活使用 CSS3 的渐变可以完成大量想不到的图形,CSS3 的渐变分为线性渐变和径向渐变,本题使用线性渐变,可以轻易解题:

div{

background-image:linear-gradient(90deg, deeppink 0px, deeppink 5px, transparent5px);

}

法七:轮廓 outline

这个用的比较少,outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。这个方法算是下下之选。

div{

height:50px;

outline:5pxsolid deeppink;

}

div{

position:absolute;

content:"";

top:-5px;

bottom:-5px;

right:-5px;

left:0;

background:#ddd;

}

法八: 滚动条

这个方法由 小火柴的蓝色理想 提供,通过改变滚动条样式实现:

div{

width:205px;

background:deeppink;

overflow-y:scroll;

}

div::-webkit-scrollbar{

width: 200px;

background-color:#ddd;

}

抛开实用性,仅仅是模拟出这个样式的话,这个方法真的让人眼前一亮。

小结

总得来说,学好css,需要长期推敲,长期注重和完善代码的细节,在每一次项目实战中,抽出一点点时间优化、尝试,日积月累成为个人的体系,

个人的风格。这种体系和风格,一般来说你自己都习惯了,会习以为常,甚至总结的时候都不知道应该说什么,但是当你去维护或者看别人的代码的时候,你就能体会出,

原来这个地方别人可能会这样用,你提出自己的见解,就能对团队和周围的同事产生好的影响,如果自己的有问题同事指出来,也可以反过来,提升自己的认识。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180328A15I8K00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券