• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

提高 CSS 的 5 个

武飞扬头像
海拥✘
帮助1

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统计分析大全》

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanhhfgbge
系列文章
更多 icon
同类精品
更多 icon
继续加载