css 相同的css属性_CSS中的order属性

css 相同的css属性

CSS | 订单属性 (CSS | order Property)

Introduction:

介绍：

Web development is an ever-growing field that would never find its end, therefore it is equally necessary to learn new ways to deal with the elements of the web page or web development. Dealing with texts, containers and various such elements need their own set of properties and values. Hence while developing or creating a web page or website on must keep looking for new and innovative ways to deal with the elements.

Web开发是一个不断发展的领域，永远不会消失，因此同样有必要学习处理Web页面或Web开发元素的新方法。处理文本，容器和各种此类元素需要它们自己的一组属性和值。因此，在开发或创建网页或网站时，必须不断寻找新的创新方式来处理这些要素。

This section is about a property that is widely used while using flexible items in a web page. How to deal with those items to make the web page or website more responsive will be discussed in this article. So buckle up and get ready for a lot of knowledge is coming right up! The property in the discussion here today is order Property in CSS.

本部分是关于在网页中使用灵活项时广泛使用的属性。本文将讨论如何处理这些项目以使网页或网站更具响应性。因此，请系好安全带，为即将来临的大量知识做好准备！今天在这里讨论的属性是CSS中的order属性 。

Elaboration:

详细说明：

The order property in CSS is used to give the order of each flexible item about other flexible items in the flexible container. If the item is not flexible the order property is of no use.

CSS中的order属性用于提供有关弹性容器中其他弹性项目的每个弹性项目的顺序。如果商品不灵活，那么order属性将毫无用处。

Syntax:

句法：

    Element{
order : number|initial|inherit;
}

The order property does not take up much of the values, the only value that it takes is known as number. Let us understand this value much more clearly.

order属性不会占用太多的值，它获取的唯一值称为number 。让我们更加清楚地了解这一价值。

订单号 (order : number)

The number value of the property as the name itself suggests is used for using assigning numbers or orders to the flexible item, so let us move further with a much more formal definition.

顾名思义，该属性的数字值用于将数字或订单分配给该灵活项目，因此让我们进一步使用更正式的定义。

This value of the order property is used to give the order of flexible items and gives numbers corresponding to every item according to the user's requirement.

order属性的此值用于给出灵活商品的订单，并根据用户要求给出与每个商品相对应的数字。

The default value of this value is 0.

此值的默认值为0。

Syntax:

句法：

    Element{
order : number;
}

Example:

例：

<!DOCTYPE html>
<html>
<head>
<style>
#main {
width: 400px;
height: 150px;
border: 1px solid #c3c3c3;
display: flex;
}
#main div {
width: 100px;
height: 100px;
}
div#DIV1 {
order: 2;
}
div#DIV2 {
order: 4;
}
div#DIV3 {
order: 3;
}
div#DIV4 {
order: 1;
}
</style>
</head>
<body>
<h1>The order Property</h1>
<div id="main">
<div style="background-color:green;" id="DIV1"></div>
<div style="background-color:red;" id="DIV2"></div>
<div style="background-color:pink;" id="DIV3"></div>
<div style="background-color:blue;" id="DIV4"></div>
</div>
</body>
</html>

Output

输出量

In the above example, it can be easily seen that the order of each item is given and hence the item is displayed in its corresponding order.

在上面的示例中，可以很容易地看出每个项目的顺序已给出，因此该项目以其相应的顺序显示。

Ending note:

结束语：

Although this property may sound a bit confusing if implemented properly and wisely then this property will surely prove to be a very strong asset for the development and creation of a very responsive web page.

尽管如果正确，明智地实现此属性可能听起来有些混乱，但是对于开发和创建响应速度非常快的网页，该属性无疑将被证明是非常强大的资产。

However, dealing with flexible items can become quite tricky but we all are familiar with the phrase-practice makes a man perfect! So go on grab your systems and start coding!

但是，处理柔性物品可能会变得非常棘手，但是我们都熟悉短语练习，使一个人变得完美！因此，继续掌握您的系统并开始编码！