- 💂 个人网站:【海拥】【摸鱼游戏】【神级源码资源网】
- 🤟 前端学习课程：👉【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统计分析大全》
