表单登录css样式_CSS Grid满足现实世界-登录表单

表单登录css样式

Once CSS Grid Layout ships in browsers we will be able to use it as an enhancement to existing layout methods long before we can consider using it as our main layout tool. I’m starting to work on some examples that demonstrate this kind of usage – and they also help to explain how some parts of grid will work as they hit the real world.

一旦CSS Grid Layout在浏览器中发布，我们就可以将其用作对现有布局方法的增强，然后再考虑将其用作我们的主要布局工具。 我将开始研究一些示例，以证明这种用法–并且它们还有助于说明网格的某些部分在进入现实世界时将如何工作。

In this example I have created a login form. The final form looks like the image below.

在此示例中，我创建了一个登录表单。 最终形式如下图所示。

You can take a look at the CodePen, depending on the browser you are using and whether you have enabled Grid Layout, you will see one of the three versions.

您可以看一下CodePen，这取决于您使用的浏览器以及是否启用了Grid Layout ，您将看到三个版本之一。

See the Pen Login Form grid example with fallback support by rachelandrew (@rachelandrew) on CodePen.

请参阅CodePen上rachelandrew （ @rachelandrew ） 提供的回退支持的Pen Login Form网格示例 。

第1步：真正的旧浏览器 (Step 1: Really old browsers)

As we want to make sure this works for all of our users, I start out by building the form with minimal layout. To centre the box I use the time-honoured method of setting auto margins left and right, I’m just setting padding on the body in this case to push the box away from the top of the screen. You could use display: table or similar if you wanted to.

由于我们要确保此方法适用于所有用户，因此我首先以最小的布局构建表单。 为了使框居中，我使用了古老的方法来左右设置自动页边距，在这种情况下，我只是在主体上设置了填充以将框推离屏幕顶部。 您可以使用display：table或类似的名称。

 body {
  padding-top: 20%;
}

h1,
.login,
.account,
.contact{
  width:80%;
  margin: 0 auto;
} body {
  padding-top: 20%;
}

h1,
.login,
.account,
.contact{
  width:80%;
  margin: 0 auto;
} 

There is some other CSS that will be used in all versions for styling the form fields, adding background and borders and so on. We get something that looks like this.

在所有版本中，还将使用其他一些CSS来设置表单字段的样式，添加背景和边框等。 我们得到的东西看起来像这样。

步骤2：我们灵活的朋友 (Step 2: Our flexible friends)

Flexbox has great browser support and can give us our horizontal and vertical centering. My next step is to check for browsers with flexbox support using a CSS feature query. If the browser supports flexbox I use display:flex on the body – set it to a height of 100 vh units – and then use the alignment properties that are in flexbox to align and justify the box.

Flexbox具有强大的浏览器支持，可以使我们水平和垂直居中。 我的下一步是使用CSS功能查询来检查具有flexbox支持的浏览器。 如果浏览器支持flexbox，则在主体上使用display：flex –将其设置为100 vh单位的高度–然后使用flexbox中的对齐属性来对齐和对齐框。

I need to do some minimal overwriting of the values set for the non-flexbox version. I could go further with this to do more alignment of the internals of the form, but I’m going to pretend that I’m building this at a point where we have widespread grid support (mostly to cut down the amount of code you need to wade through).

我需要对非弹性框版本设置的值做一些最小的覆盖。 我可以做得更好，以使表单的内部更加对齐，但我要假装自己是在我们拥有广泛网格支持的点上进行构建的（主要是减少所需的代码量）涉猎）。

第三步：调用网格！ (Step 3: invoke the grids!)

I’ve now got something, with very little work that looks pretty good. However Grid Layout can add some finishing touches here.

我现在有了一些东西，几乎没有什么工作看起来还不错。 但是，“网格布局”可以在此处添加一些修饰。

One again I am using a feature query to check for grid support. I can then add CSS specifically for those grid supporting browsers.

我再次使用功能查询来检查网格支持。 然后，我可以专门为那些支持网格的浏览器添加CSS 。

@supports (display: grid) {
}@supports (display: grid) {
} 

对齐表格 (Aligning the form)

If you create a grid with column and row tracks that do not add up to the size of the grid container, you can use alignment properties to align the tracks within that container.

如果创建的列和行轨迹的总和不等于网格容器的大小，则可以使用对齐属性在该容器内对齐轨迹。

The align-content property controls the block axis, aligning the grid rows. I set align-content to centre and all the tracks line up at the centre up of the grid.

align-content属性控制块轴，对齐网格行。 我将align-content设置为居中，所有轨道都在网格的中心对齐。

The justify-content property controls the inline axis, aligning the grid columns. I set justify-content to centre and all the tracks move to the centre of the grid. These properties are part of the Box Alignment Level 3 module, the module that takes all the nice alignment properties that are part of flexbox and makes them available to other CSS layout techniques.

justify-content属性控制内联轴，对齐网格列。 我将对齐内容设置为居中，所有轨道均移至网格的中心。 这些属性是Box Alignment Level 3模块的一部分，该模块采用flexbox的所有不错的对齐属性，并使它们可用于其他CSS布局技术。

对齐网格区域的内容 (Aligning the content of grid areas)

At the bottom of my form is some help text, I’m using the align-self property with a value of end to align the text to the bottom of that row.

表单的底部是一些帮助文本，我在使用align-self属性（其值为end）将文本与该行的底部对齐。

.account {
      align-self: end;
}.account {
      align-self: end;
} 

嵌套网格 (Nested grids)

Inside my form are my form elements, with labels and fields. As these are nested inside the grid and not direct children of the grid container, I need to create a new grid on the div elements that wrap the form fields. If we had subgrid support in any browsers, this would be a good use case for that, but I digress.

在表单内部是表单元素，带有标签和字段。 由于这些嵌套在网格内而不是网格容器的直接子级，因此我需要在包装表单字段的div元素上创建一个新网格。 如果我们在任何浏览器中都提供了subgrid支持，那么这将是一个很好的用例，但是我离题了。

My nested grids create a flexible three column grid in each row and also align those items to centre so the labels neatly line up with the fields.

我的嵌套网格在每行中创建了一个灵活的三列网格，并将这些项目对齐到中心，以便标签与字段整齐地对齐。

I could have chosen to use flexbox for this part of the grid, it would be a valid choice. There is a key difference between grid and flexbox however. When we use grid we decide our grid sizing then put things into it, this makes it very easy to align things in both directions. Where flexbox shines is in being able to look at the content, and distribute space according to the size of the content. By adding a width to items that is used by flex-basis we could get this grid like behaviour for these items, in an ideal world it seems more grid-like however, and we do more of the layout on the container rather than needing to add properties to the items.

我可以选择在网格的这一部分使用flexbox，这将是一个有效的选择。 然而，grid和flexbox之间有一个关键的区别。 使用网格时，我们决定网格大小，然后将其放入其中，这使得在两个方向上对齐都非常容易。 flexbox的亮点在于能够查看内容，并根据内容的大小分配空间。 通过为flex-basis使用的项目增加宽度，我们可以使这些项目具有类似网格的行为，但是在理想情况下，它看起来更像网格，并且我们在容器上进行了更多的布局，而无需向项目添加属性。

This decision making process is something we’ll find we can do more and more as we move to layout methods actually designed for the tasks we put them to. It will be nice once we can actually make these decisions for real – using the right layout tool for the job, rather than the one that has the fewest compromises.

随着我们转向为任务所实际设计的布局方法，这一决策过程将变得越来越多。 一旦我们能够真正真正地做出这些决定，那就好了-使用适合工作的正确布局工具，而不是妥协最少的工具。

Find out more about some of the techniques used here:

在这里找到更多有关所用技术的信息：

- Jen Simmons has written a great article on Feature Queries
- Lots of small example of pieces of grid layout over at Grid by Example
- more about the difference between grid and flexbox

-詹·西蒙斯（Jen Simmons） 在“功能查询”上写了一篇很棒的文章
- 通过示例在Grid上有许多网格布局的小示例
-更多关于grid和flexbox之间的区别

翻译自: https://rachelandrew.co.uk/archives/2016/09/20/css-grid-meets-the-real-world-a-login-form/

表单登录css样式