2024年最全N年CSS开发总结的20条CSS开发技巧，适合高手新手小白！！(1)，面试必过技巧

最后

由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

Grid布局： https://cssgridgarden.com/ and

CSS选择器：https://flukeout.github.io/

3. 一部分的CSS级联样式是比较奇怪的。html元素可以通过各种方式设置样式，根据您为元素设置的式样，某些原生的式样会被覆盖。编写内联样式将覆盖任何样式。id选择将覆盖class的样式。可以参考这篇文章：see this post on calculating CSS specificity - Star Wars edition!

4. 用 CSS 修复 HTML 中的缺点不是一个好主意。首先修复您的 HTML。

5. HTML 中的伪元素也可以设置样式，并在样式元素方面提供方便的技巧。最著名的是::beforeand ::after，但总共有七个伪元素。

6. CSS 允许组织网页上的元素。甚至还有一些布局系统——最著名的包括 Grid、Flexbox、浮动和表格（按从新到旧的顺序）。

7. 如果您的项目的浏览器支持允许，一定要尝试一些最新的 CSS，例如 Grid。如果人们太害怕尝试新的 CSS，即使它还没有完全的浏览器支持，那么没有人会尝试它！使用https://caniuse.com检查浏览器支持。

8. 网页上的元素可以使用多种不同的值来调整大小和间隔。有px, ems, rems, ch, vw, vh, %, 等等。在构建更复杂的网页时，元素大小或间距值的相互作用会对样式的易用性和可维护性产生很大的影响。

9. 对于编写 CSS 的每一种速记方式，很可能都有一种编写 CSS 的速记方式。例如margin: 20px 30px 10px 15px可以是margin-right: 30px, margin-left: 15px, margin-top: 20px, margin-bottom: 10px。对于阅读您的 CSS 的其他开发人员来说，编写长手版本有时会更清晰！

10. 您可以直接在浏览器的开发工具中更改 CSS（要打开它们，请右键单击浏览器窗口并选择“检查”或“检查元素”）。最棒的是，任何样式都不会被保存，因此您可以在这里进行实验！开发工具的另一个优点是“计算样式”选项卡，因为它可以准确显示当前应用于元素的样式。这在调试 CSS 时非常有用！除了计算样式外，开发工具还将显示布局样式，让您清楚地指示将哪些边距、填充和边框应用于元素。

11. Stack Overflow和CSS Tricks是两个与 CSS 相关的问题的朋友。

12. 检查 MDN 文档以获取最新的 CSS 文档。他们甚至为许多 CSS 属性提供了一些实时游乐场 - 例如https://developer.mozilla.org/en-US/docs/Web/CSS/transform。

13. 了解相对位置和绝对位置是值得的。我的意思position: relative是具有子（嵌套）元素的父元素带有position: absolute.

14. 一个网页往往由许多不同大小的盒子组成。每个元素实际上被浏览器视为一个框 - 标题、段落、跨度，一切。每个框由 4 项组成 - 元素的内容、填充、边距和边框。默认情况下，盒模型声明您添加到元素的任何边框或填充都将添加到元素的宽度或高度之上。这可能令人困惑或违反直觉。设置box-sizing: border-box告诉元素在添加边框或填充时不要增加宽度或高度。而是调整内容大小。

15. 除非您确定正确管理自己的焦点状态，否则不要删除默认的浏览器焦点轮廓。

最后前端到底应该怎么学才好？

如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。

不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。学习编程并不是每天光看视频，你学习编程最重要的目的是为了编写软件产品，提供给大众使用，所以用手写出代码实现功能才是我们要做的事情。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

0,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h6aXQ0OTQ4MDE4MzE=,size_16,color_FFFFFF,t_70#pic_center)