css无边框-想要练好JS，必须先攻CSS——前端练手之路

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

今天我要讲的主题是css。 下面我详细说一下我的css学习历程，分享一些干货。 希望这次的分享能够给您带来启发和帮助。

个人CSS历史

先说一下我的css学习历程。 12年老师1对1教我div+float的固定布局。 所有的元素都是浮动的，学生会网站的后台页面都是我做的，因为我学过一段时间的PS，还蛮多的，UI都是我自己做的，比较丑。 老师说第一次做这样的很好。 当时老师就认为我有做后端的天赋，也是从这个时候开始接触后端。 我自己为我的毕业项目制作了一个全栈网络。 整个毕业设计做完了，我决定做后端，感觉自己更喜欢。 2014年工作后，当时还不知道怎么用less，就直接写css了。 当时我主要写的是固定布局的PC页面。 2014年底，在项目中折腾，用过一段时间的JQmobile，超级难用。 2015年做移动项目时，研究了几个css库，学习了bootstrap及其一些源码，也使用了webfont。 这次使用fluid布局进步了很多，然后又学习了rem，并在项目中使用了，此时我的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-左侧区域，实现了左固定右自适应，（前提是box-sizing必须是border-box，否则padding加100%宽度会超过屏幕长度），一般代码如下：

3. 伪类的内容attr

before 和 after 的伪类的 content 属性用于插入内容。 我们可以通过attr传入当前元素的属性名，并将属性值加载到伪类的内容中。 这是一种写法，但实际应用场景可能不多，看一下

4、以汉字符号为中心的疗效

您不需要关心动态输出文本。 有些页面可能有类似的提醒。 使用英文标点符号对居中效果更加友好。

5.元素的顶部和底部宽度

布局页面时，从上到下书写页面。 一般是写入下一个元素的margin-top来确定前一个元素的宽度。 然后尽量不要同时写margin-top和margin-bottom。 如果混合使用后期不容易维护。 例如某个区域需要堆叠，或者一个组件可能被很多地方共享。 如果混合的话，后期修改的时候可能会有点麻烦。 这里造成的问题可以说是无伤大雅，但是无论是js还是css，注重细节，养成良好的习惯，都是编码能力的体现。

6.字体颜色透明

有时设计者在配置字体颜色时可能会使用透明比例来设置几种不同的颜色。 例如，主色为#000，浅灰色#000的透明度为80%。 这种情况下，不建议网页编写透明度，而是让设计者给出对应的颜色值，因为透明颜色会根据背景不同而不同，比如今天看到的情况，所以扩展性比较差。

7. 命名

命名是最麻烦的事情。 我们先看第一个。 这样，通过比较详细的名称，可以一眼就明白当前类的含义，但是宽度比较长，增加了代码量。

第二种使用缩写名，这样会使代码更短，写起来也更快，但不太容易阅读。

如果使用缩写名，可以在文档上达成一致，这有同意和熟悉的成本，但熟悉后效率会更高，而且类的命名也会显得更加规范和统一

8. 0.5px边框的误解

之前写边框的时候，我发现只要边框的颜色浅一点，边框就会看起来更细，所以当设计师问我为什么边框看起来更粗的时候，我就告诉他们把颜色淡一点。 嗯，这个方法我在实践中仍然在使用。 网上有博客说0.5px的边框可以通过css3变换缩放50%来实现。 我还是很惊讶，1px其实是最小的数学单位，怎么可能做到0.5px，所以我做了一个实验，我设置了1px边框颜色为000（黑色），如图，

当我使用scale缩放50%时，颜色变成了c5c5c5，但实际上还有1px。 如图所示，

我用的是拾色器工具，精确到像素，还是1px，所以这些方法都无法达到0.5px但是颜色变浅了。 还有一些手机屏幕是在2px的基础上显示1px的，所以这些方法可以将2px缩放为1px，让1px边框显得更淡。 这种方法确实可以让边框变细，但不能说是0.5px。

9. 用户选择：无

该属性防止该区域的内容被选中，可以防止用户长按复制，也可以防止用户复制不相关的内容。 比如我只希望用户复制下面的6655验证码。 我设置了user-select:none except 6655，并且长按复制按钮其他部分没有出现，按钮数量没问题，第三张图的左右下标只能在6655之间拖动

10.js类

在dom绑定风暴期间，你可能会直接将类与当前样式绑定，这会因类名的更改或替换而影响JS。 设置风暴，让风格和逻辑之间的耦合被释放。 阅读代码时，您还可以立即看到哪些元素与风暴绑定。

11. 公开课的构成

嗯，这个是我自己命名的，我们看第一种写法，很常规，所有样式都写在一个类中

我们看第二个，定义一个public类，通过less在样式中直接引入这个类。 第二种会更高效（少写几个字母），但是需要熟悉和维护public类

看第三个，在元素的类中写public类，这个比较灵活，比如我现在要写两个item元素，一个左浮动，一个右浮动，那么这些就可以直接创建了，不用改变item 使用不同的类来实现不同的样式，就像JS代码去重一样，传入不同的参数进行标识，共用同一个地方。

第四种公共类全部写在element中。 写dom的时候，不需要写css。 直接将想要的类写入dom即可。 是不是有点像JS中的组件化？ 效率比较高，比如PC后台项目，对UI要求不高，比较适合。 这个效率还取决于公共类是否全面以及你对项目中的类是否熟悉，但是也要注意元素的宽度不要太长，尽量保持在4个类之内，如果超过，你不应该使用这些写作方法。

虽然这四种写法都是可以的，但是在一个项目中，不同的部分可以采用不同的写法，可以非常灵活地选择想要的形式。

12. rem布局的文字大小

大家都知道，浏览器通常不允许文本大于 12px。 如果设置大于12px，浏览器将显示12px。 当我们使用rem布局时，元素会根据屏幕长度进行缩放。 例如，设计者给出 750px 的设计稿，如果某个元素的文字为 22px，那么当用户的屏幕长度为 375 时，文字会缩放为 11px，实际浏览器会显示为最小12个像素，那么其他非字体元素仍然会按比例缩小。 这时，字体与其他元素的比例可能就不是原来设计稿的比例了。 如果用户的屏幕是320px，那么原设计稿的元素之间的比例会更差。 因此，我们必须根据自己的情况告诉设计者，在宽度为750像素的设计稿中，最小的字体大小应该是多少像素。

13. 对象适配：覆盖

我们制作列表页面的时候，图片都是固定大小的，比如一张100px*100px的正方形图片，但是很有可能收到的图片不是正方形的，而这个非正方形的图片就放在正方形的img标签里，就会变形。 如果使用object-fit: cover，可以将超出比例的部分剪掉，这样图片就不会显得变形或者拉伸，但这会导致图片不完整。 根据图片的不同，它可能会被裁剪。 截掉内容的关键部分，但由于列表本来就是缩略图，所以这个属性还是可以加上的，是一个比较折衷的方法。

14、图片一致

说到图像拉伸的问题，就需要说到图像上的一致性，因为无论是拉伸还是裁剪，都会造成图像的残缺。 拉伸影响视力，裁剪担心关键部位丢失。 如果不严格按照约定的规格，肯定不能兼容所有的情况，所以在项目开始的时候，一定要和产品经营者就图片的比例达成一致，建议约定一个正方形。

概括

总的来说，要学好css，需要常年推敲，长期关注和构建代码细节，在每一个实际项目中，花一点时间去优化和尝试，日积月累才能成为个人系统。

个人风格。 这种体系和风格，一般来说，你自己习惯了，就会习惯，甚至在总结的时候都不知道该说什么css无边框css无边框，但是当你维护或者看别人的代码的时候，你就可以觉得，

原来这个地方可能就这样被别人利用了。 如果你提出自己的意见，就能对团队和周围的朋友形成良好的影响。 如果有问题的同学指出来，你也可以反其道而行之，提高自己的理解力。

和设计师。 。 。

做好css，写出好的页面，与设计师沟通也是一个非常重要的技能，因为设计师决定了页面最终会是什么样子。 要通过工程初审，设计者也必须通过初审。

场景一：

设计师给了我一个交互疗效，前端收到了。 交互效果还可以，但是实施成本比较高，功能也无法完成。 我不想说得那么详细，然后就说我没时间做。 设计师想了想，这个交互很难吗？ 其他人也能做到。 你为什么不这样做呢？ 只要三言两语，就会引起冲突。 产品的问题出在哪里？ 最后可能还是要做交互效果，时间就耽误了。 其实这是很多后端都会遇到的问题。 时间紧迫，活动可能要延迟。 如果要做这种互动，自然会有些抱怨。 如果要做的话，随着时间的推移，矛盾会越来越深，沟通也会越来越困难。 以不同的方式思考这个问题。 大多数时候设计和交付的时间都非常紧张。 你要给产品和设计负责人解释，前端在催你。 我也无法解释。 那我们换个沟通方式吧，比如：我们时间真的很紧。 这种交互既麻烦又耗时。 我可以做，但是可能会影响项目的进度。 为什么我不先把它变得简单一些呢？ 当测试启动的时候有时间添加这个交互，实在是不可能。 这个地方上线后我可以单独优化一下吗，很快就上线了。

设计师还是有道理的。 根据网络上的一些特点，设计师设计的一些风格和想法似乎无法实现，或者实现成本太高。 我们要说服他们为什么这个地方不能实现，因为他们不明白，所以我担心你会误导他们（其实有时候有人误导他们），所以如果你想说服别人，你必须澄清问题，理清知识点，向设计者解释无法实现的原因，并要求有理有据，旁证最好到网上找相关博客或者官方解释。 有很多矛盾和问题，是因为我们忽视了沟通，或者是我们懒惰了。 其实，当我们能够对外行人讲清楚知识点的时候，也说明我们理解透彻，能力有所提高。 设计者设计的稿子必须尽力达到其疗效，同时还要考虑可扩展性和可实现性。 态度非常重要。 不要让人觉得自己敷衍了事。 什么是敷衍？ 敷衍一下，不然摸鼻子只会怪自己。 技术点一定要讲清楚，不然解释不清楚，别人也不会买单。 当发现设计稿有问题时，耐心提醒一些不合适的地方，帮助别人多承担一些。 前端和设计师一定要相处融洽。

说你想说的话

不要兼容低版本的IE（我觉得兼容11以上就够了），尤其是对于初创公司。 浪费人力成本，比如IE8不支持圆角，就得用图片代替，

没有占位符，就得用JS模拟。 对于个人来说，技术的升级是大势所趋。 我们要向前看，有东西值得你学习，不要把青春浪费在这个地方。

有时间的话大家都要看看bootstrap的源码。 看一些核心部分就够了，比如变量和一些最常用的部分。 源码虽然不难，但是可以得到很多启发。