css 计算属性的应用

by Deepika Gunda

由Deepika Gunda

如何使用一点CSS Grid魔术设计计算器应用 (How to use a little CSS Grid magic to design a calculator app)

This article is a quick intro to CSS Grid. We will be making a calculator using it.

本文是CSS Grid的快速介绍。我们将使用它来制作一个计算器。

This article is good for developers who have a basic understanding of CSS and for those who want to learn the newer tools CSS offers to style pages.

本文适合对CSS有基本了解的开发人员，以及想要学习CSS为样式页面提供的较新工具的开发人员。

I liked CSS Grid area templates from the very start! The examples all over the web can look complicated, but trust me, one attempt at using them and you will love them and use them in many of your projects.

我从一开始就喜欢CSS Grid区域模板！网络上的示例看起来很复杂，但是请相信我，尝试使用它们，您会喜欢它们并在许多项目中使用它们。

This thought started after wanting to make something similar to the image below.

这个想法始于想要做出类似于下图的内容。

Note that the =, 0, and AC buttons are twice in size of regular buttons. At first I thought of using the table HTML element and colspan and rowspan to make this. But then I wondered if we could make it using CSS Flexbox. After failing to place the = and 0 and . in the same row, I began to realize the need for CSS Grid.

请注意，=，0和AC按钮的大小是常规按钮的两倍。最初，我想到了使用表格HTML元素以及colspan和rowspan来实现这一点。但是后来我想知道我们是否可以使用CSS Flexbox做到这一点。未能放置=和0和之后。在同一行中，我开始意识到对CSS Grid的需求。

The complete code for this is available here: CSS-Grid-Calculator.

此处提供了完整的代码： CSS-Grid-Calculator 。

什么是CSS网格？ (What is CSS Grid?)

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning. — from my fav w3schools.com
CSS网格布局模块提供了具有行和列的基于网格的布局系统，从而使设计网页变得更加容易，而不必使用浮动和定位。 —来自我的最爱w3schools.com

So I would assume the main layout and table-like content look like grids, so we can use CSS Grid to style them.

因此，我假定主布局和类似表格的内容看起来像网格，因此我们可以使用CSS Grid设置样式。

制作网格的第一件事 (First thing to make a grid)

We have to use the display:grid on any container which needs to be a grid. In case it is the whole main page of website, we can do it like this:

我们必须在需要为网格的任何容器上使用display：grid。如果它是网站的整个主页，我们可以这样做：

<html>

<style> #main{       display:grid;     }

</style>

<body><div id="main"></div>

</body></html>

下一步是什么？ (What’s next?)

Let’s say you want to make a website which has a navbar, right sidebar, left sidebar, and middle portion for content. Typically you would want the navbar and sidebars to have fixed width and height in terms of viewport percentages and the content portion to expand in whatever space is left.

假设您要制作一个包含导航栏，右侧，左侧和中间部分内容的网站。通常，您会希望导航栏和侧边栏在视口百分比方面具有固定的宽度和高度，并且内容部分要在剩余的空间中扩展。

So how do we do that?

那么我们该怎么做呢？

<style>#main{ display:grid; grid-template-columns: 20vw auto 20vw; grid-template-rows: 15vh auto; grid-template-areas:"header header header"                     "leftSB content rightSB";

}#header{ grid-area:header;}#leftSB{  grid-area:leftSB;}#rightSB{  grid-area:rightSB;}#content{grid-area:content;}

</style><body> <div id="main">   <div id="header>header</div>   <div id="rightSB">right sidebar</div>   <div id="leftSB">left sidebar</div>   <div id="content">content</div> </div>

</body>

Here is what achieves the layout we needed.

这就是实现我们所需布局的方法。

详细说明 (Detailed explanation)

In the picture above, you can see that we just needed to create simple divs which hold our header, sidebars, and content and add it to the root.

在上面的图片中，您可以看到我们只需要创建简单的div，即可保存标题，侧边栏和内容并将其添加到根目录中。

In the style section, we have added “display:grid” for the main container.

在样式部分，我们为主容器添加了“ display：grid”。

Next, we can see that overall we need 2 rows and 3 columns. That is why we have added the line

接下来，我们可以看到总体上我们需要2行和3列。这就是为什么我们添加了这一行

grid-template-columns: 20vw auto 20vw;

We are telling it that we need 3 columns, and that the first column should occupy 20% of the view’s width, that the next column is auto (that is all the space available to be taken by this column), and that the last column is again 20% of view’s width.

我们告诉它，我们需要3列，并且第一列应该占据视图宽度的20％，下一列是自动的(即该列可以使用的所有空间)，最后一列还是视图宽度的20％。

grid-template-rows: 15vh auto;

We are here saying that we need two rows overall. The first row will be used for a header and it will be 15% of viewport height, and the remaining space is needed for the second row.

我们在这里说，我们总共需要两行。第一行将用作标题，它将是视口高度的15％，第二行需要剩余空间。

Now comes grid-template-areas. Here we define in simple names what will occupy the grid. Let’s say we want the header to take the whole first row and there should be no divisions. Then we use the following:

现在是网格模板区域。在这里，我们以简单的名称定义将占用网格的内容。假设我们希望标题占据整个第一行，并且不应有任何分隔。然后我们使用以下内容：

grid-template-areas:"header header header"

Because we have 3 columns, we need to mention header 3 times. By using the same name, the outcome will be a unified header region.

因为我们有3列，所以我们需要提到标题3次。通过使用相同的名称，结果将是统一的标头区域。

grid-template-areas:"header header header"                     "leftSB content rightSB";

This is the complete grid-template-areas, which uses simple names to define each portion of our 2 * 3 grid.

这是完整的网格模板区域，它使用简单的名称来定义2 * 3网格的每个部分。

Now that we have defined the grid template, we are going to assign the divs to these areas. So, we have used the IDs of the div and assigned the template area name using grid-area.

现在我们已经定义了网格模板，我们将把div分配给这些区域。因此，我们使用了div的ID，并使用grid-area分配了模板区域名称。

#header{ grid-area:header;}#leftSB{  grid-area:leftSB;}

Thats it, we have now defined how these divs should be positioned on all viewport sizes without using floats or widths on individual items and also without using bootstrap etc.

就是这样，我们现在定义了这些div应该如何在所有视口尺寸上定位，而不在单个项目上使用浮点数或宽度，也不在使用引导程序等。

Isn’t it mind-blowing? See what we created in these few lines in action here.

是令人难以置信吗？在这里查看我们在这几行中创建的内容。

下一步是什么？ (What’s next?)

We can now work on our divs to add sidebars, navbars etc. I will leave this example here and now proceed to see a little complicated calculator design using CSS Grid.

现在，我们可以在div上添加侧边栏，导航栏等。我将在此处保留此示例，然后继续使用CSS Grid来查看一些复杂的计算器设计。

定义组件 (Defining the components)

We have a formula display section, the current display section at the top. The rest are the buttons 0–9, the AC (clear) button, and the operator buttons + — * / and =.

我们有一个公式显示部分，当前显示部分在顶部。其余的是按钮0–9，AC(清除)按钮以及操作员按钮+ — * /和=。

So, let’s create buttons and divs for all the components and keep them in a container.

因此，让我们为所有组件创建按钮和div，并将其保存在容器中。

<body> <div id="root">  <label id="display"> 0</label>  <label id="cdisplay" >0</label>  <button id="clear">AC </button>  <button id="divide">/</button>  <button id="multiply">*</button>  <button id="seven">7</button>  <button id="eight">8</button>  <button id="nine">9</button>  <button id="minus">-</button>  <button id="four">4</button>  <button id="five">5</button>  <button id="six">6</button>  <button id="plus">+</button>  <button id="one">1</button>  <button id="two">2</button>  <button id="three">3</button>  <button id="zero">0</button>  <button id="dot">.</button>  <button id="equal">=</button>   </div> </body>

Let’s look at the calculator image. You can see that we have 4 columns and 7 rows. So let’s define our grid:

让我们看一下计算器图像。您可以看到我们有4列和7行。因此，让我们定义网格：

#root{ padding:5px; background-color:black; width:240px; height:280px;

display:grid;   grid-template-columns: 1fr 1fr 1fr 1fr;   grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;   grid-gap:0.1px;

grid-template-areas:    "display display display display"   "cdisplay cdisplay cdisplay cdisplay"   "clear clear divide multiply"   "seven eight nine minus"   "four five six plus"   "one two three equal"   "zero zero dot equal"; }

Breaking this down…

分解这个……

display:grid;   grid-template-columns: 1fr 1fr 1fr 1fr;   grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

Here we have said that we have 4 columns and 7 rows and each part of the grid is the same size. Note that the template columns and rows use 1fr. Fr is a fractional unit and 1fr is for 1 part of the available space.

在这里我们已经说过，我们有4列和7行，并且网格的每个部分都具有相同的大小。请注意，模板的列和行使用1fr。 Fr是小数单位， 1fr是可用空间的一部分。

I have given the root div a width of 240 px and height of 280 px. So 1 fr is approximately 60px wide * 40 px high.

我给根div的宽度为240像素，高度为280像素。所以1 fr大约是60像素宽* 40像素高。

grid-template-areas:    "display display display display"   "cdisplay cdisplay cdisplay cdisplay"   "clear clear divide multiply"   "seven eight nine minus"   "four five six plus"   "one two three equal"   "zero zero dot equal"; }

Here we have defined the grid template areas.

在这里，我们定义了网格模板区域。

Grid template areas are a set of row * column strings. You need to add as many strings as there are rows in your grid. In each row-string you need to mention what each column will contain. The number of items in each string should match the count of columns.

网格模板区域是一组行*列字符串。您需要添加的字符串与网格中的行数一样多。在每个行字符串中，您需要提及每列将包含的内容。每个字符串中的项目数应与列数匹配。

Note how the display occupies the whole first row. So, it is added 4 times in first row-string.

请注意显示内容如何占据整个第一行。因此，它在第一个行字符串中添加了4次。

cdisplay, that is current display, occupies the second row and is defined similar to display.

cdisplay(即当前显示)占据第二行，其定义类似于display。

Next come the buttons. The clear button is in 3rd row and first and second column put together. Hence it is mentioned twice on row-string 3.

接下来是按钮。清除按钮位于第三行，第一和第二列放在一起。因此，它在行字符串3上被两次提及。

And it goes on…

然后继续……

Now that the major work is over, we need to assign these grid areas to the divs.

现在主要工作已经结束，我们需要将这些网格区域分配给div。

#display{   grid-area:display; }#cdisplay{   grid-area:cdisplay; }#clear {   grid-area:clear; }#divide {   grid-area:divide; } #multiply {   grid-area:multiply; }

I have shown how the grid areas are being assigned for 4 div’s.

我已经展示了如何为4格分配网格区域。

The complete example can be found here where we have added a little more styling.

完整的示例可以在此处找到，我们在其中添加了更多样式。

结语 (Wrapping up)

As mentioned earlier, this is just an introduction to CSS Grid and more specifically to CSS Grid template areas. I hope this example will make you think of CSS Grid when you look at websites from now on and I hope you will use them in the future.

如前所述，这只是CSS Grid的简介，更具体地说是CSS Grid模板区域的简介。我希望这个例子能使您从现在开始浏览网站时想到CSS Grid，并希望将来会使用它们。

If you liked my article, please clap. It is quite encouraging for me.

如果您喜欢我的文章，请鼓掌。这对我来说是令人鼓舞的。

If you were to do the same task, how would you approach this? Let me know in the comments.

如果您要执行相同的任务，您将如何处理？在评论中让我知道。