- 💂 个人网站:【海拥】【摸鱼游戏】【神级源码资源网】
- 🤟 前端学习课程：👉【28个案例趣学前端】【400个JS面试题】
- 💅 想寻找共同学习交流、摸鱼划水的小伙伴，请点击【摸鱼学习交流群】
CSS 应该是简单的，并且可以对一些关键特性有正确的了解。
- 盒子模型
- 边距相互抵消
- 布局
- 使用表来设置样式表
- Em、Rem 和 Px
盒子模型
好吧，学习 CSS 最简单的方法就是理解盒模型以及如何让它成为你的 B*tch
在 div 上给出这个 CSS
div { border: 10px solid red; width: 200px; padding: 10px; margin: 10px; }
这将是您的默认输出，其中中心框很200px宽，如我们在样式中所述
但是如果你改为添加box-sizing: border-box
* { box-sizing: border-box; }
你明白了——你能看出区别吗？
所以现在内容框包含填充和边框，这导致内容框从中消失，200px -> 160px因为填充和边框的总大小是40px.
通过这样做，您的布局将根据代码更加可预测。因此，如果您的框应该是 200px，则它是 200px 而不是 240px。
边距相互抵消
好吧，我经常看到人们忘记这个，而不是经常提到的事情。所以给出以下 CSS 和标记
p { margin: 10px 0; }
<p>some-text</p> <p>some-other-text</p>
我们应该在两边都有 10px 的边距，但一个常见的错误是认为边距加起来但实际上相互抵消了，就像这样：
所以对于间距元素，我倾向于使用 flex/grid 和它们的 gap 属性来获得可预测的间距，主要是这样我就不用担心了。
布局页面
所以我有几种工作方式，回顾这些年来，我们不得不解决一些可怕的事情，如果您熟悉“clearfix”，您就会明白我在说什么。
单行内容
对于单行内容，我倾向于使用 flexbox，这有几个原因。Flex默认是grid所在的一行，所以我要少写。我不需要关心每个元素的行为方式——每个元素都可以相对不可知。
在这个例子中，我想创建一个顶栏；
所以它可以通过多种方式完成，我倾向于确保默认情况下所有标题都没有边距，以使其更具可预测性。
标记
<nav> <img src="http://placekitten.com/50/50" alt=""> <h3>Some title</h3> <button>menu</button> </nav>
然后我会这样设计它：
nav { display: flex; align-items: center; gap: 10px; background: #f1f1f1;`在这里插入代码片` padding: 10px; } nav img { height: 100%; }
我将图像设置为 100% 高度的原因实际上是如果设计师稍后告诉我我们可以将高度设置为 50px，那么我只需添加它，现在菜单将适应我的需要。
多行 2,3,n 列布局
它主要用于复制行之类的，我通常为此使用网格
对于这个例子，我想创建一个 3 列网格，我们不知道有多少元素进入其中，因为元素数量发生了变化。
鉴于此标记
<main> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> </main>
我们可以这样设计它：
main { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
这要求每个元素都具有某种内容，否则您将无法看到它们。
这很强大，因为假设在平板电脑上我们只需要 2 列，这是我们唯一需要做的事情：
// Portrait tablet @media only screen and (max-width: 768px) { main { grid-template-columns: 1fr 1fr; } } // Mobile @media only screen and (max-width: 480px) { main { grid-template-columns: 1fr; } }
我倾向于不使用转发器，因为它只会增加额外的复杂性，而且几乎不会比将整个内容写出来css repeat更短
页面布局
让我们创建下面的布局
所以我们之前有导航，现在想在页面上创建侧边栏、页脚和内容
对于主要（包装），我们这样做：
main { width: 100vw; height: 100vh; display: grid; grid-template-areas: "nav nav" "aside content" "footer footer"; grid-template-columns: 230px 1fr; grid-template-rows: 50px 1fr 30px; }
它主要确保它填满整个页面。然后我们以最短的方式描述我们的布局。
请记住将每个元素附加到主布局
nav { grid-area: nav; } section { grid-area: content; } aside { grid-area: aside; } footer { grid-area: footer; }
但这确保我们从 main 可以决定所有静态元素的高度和宽度，并且可以轻松地将自定义元素添加到框中。
使用表来设置样式表
我已经尝试了很多次使用网格、弹性框、浮动，当你做对时，表格中就有这么多。
这是我认为我花费最多时间来正确设置样式的事情之一，而且当你正确使用表格时，通常会更容易使用。
Ofc 它删除了在您的单元格中使用 flex 但这可以通过包装您的内容来调整。
Em、Rem 和 Px
回到大约 10 年前，使用哪一个实际上很重要，但是缩放操作系统文本和浏览器窗口实际上会为您缩放所有内容。它在那天没有回来，这就是为什么 em/rem 很强大。
但是大多数设计师在设计 10px 时会想要 10px，并且用 ems 和 rems 混淆你的样式使得设计一些东西变得非常困难。
好处不再是好处了。
所以我会建议人们再次开始使用可预测和良好的旧 PX。
⭐️ 好书推荐
《SPSS统计分析大全》
【内容简介】
SPSS的全称是Statistical Product and Service Solutions，即“统计产品与服务解决方案”软件，该软件是公认的最优秀 的统计分析软件包之一。SPSS软件面向行业应用人员，软件设计突出统计方法的成熟、实用、易用、界面易操作及与文 字处理软件等的高交互性上。
📚 京东自营购买链接：《SPSS统计分析大全》
