前端修行-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，需要长期推敲，长期注重和完善代码的细节，在每一次项目实战中，抽出一点点时间优化、尝试，日积月累成为个人的体系，

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

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