Shulou(Shulou.com)06/01 Report--

This article will explain in detail what are the advanced attributes of CSS3. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

There are many CSS3 multi-column properties. Let's introduce them one by one, including the following properties:

1. CSS3 creates multiple columns

The column-count attribute specifies the number of columns to be split, that is, how many columns you want your text to display, we do not need to write a lot of div, and then to limit the number of words to be called in each div, and we also need to let div float, which is very troublesome. We can achieve this requirement by ourselves with multiple columns of CSS3. As shown in the figure:

The effect is as follows:

In this way, we can divide the text into three columns to display, the excess text is automatically hidden, and we can use it when writing responsive pages.

2. The gap between columns in CSS3 multiple columns

Adjust the gap between columns in multiple columns when we can use column-gap, it specifies the gap between columns, we no longer need to specifically set floating for div, but also set the margin between them, with it can be like Swiper such a property, easily set spacing, the effect as shown above, divided into three columns, and set spacing. The code is as follows:

3. CSS3 column border

There are more interesting multi-column properties. Above we have set the spacing between columns. Here, we use the column-rule-style property to set the border style between columns. We no longer use pictures or more CSS to write, it is fine, for example:

In this way, we can divide the text into three columns, spacing 40px, and the style of the column border is dashed line. in addition, we also set the width (column-rule-width) and color (column-rule-color) of the border, and column-rule our multi-column borders as we do in CSS, for example:

The results are as follows:

By the way, let me tell you what border styles CSS has, which is directly above the picture:

4. Specify how many columns the element spans

That is, to specify how many columns an element should span. At this time, we will use the (column-span) attribute, which has two values, one is 1, and the other is all, that is to say, if there is a text we divide it into three columns, we can specify that its title occupies 1 column or all columns. As shown below:

5. Specify the width of the column

Not only can we divide the text into several columns, but we can also specify the width of the column, which we can use the column-width attribute to specify the width of the column. For example:

Limit the number of lines of text displayed by a block element, we can use-webkit-line-clamp, because it is an irregular attribute, it does not appear in the draft CSS specification, but it does not mean that we can not use it, in order to use it to achieve the desired effect, we have to combine some attributes, such as:

In this way, we can have our text display six lines and replace the rest with ellipses.

In addition, we can also display a line of text, replacing the excess with an ellipsis, for example:

The writing-mode attribute defines how the text is typeset horizontally or vertically, so we can save a lot of CSS code, and one property can be done. Writing-mode has five values, which are:

We can place elements in our table in any form, such as the following figure:

This is also our common knowledge that elastic boxes are made up of elastic containers (Flex container) and elastic sub-elements (Flex item). Define the display property as an elastic container by setting its value to flex or inline-flex. The container contains one or more elastic sub-elements.

Normally, we only need to set display:flex, and the elastic sub-element elements will be displayed in one line. (the elastic sub-elements are usually displayed in one line in the elastic box. By default, there is only one line per container), from left to right.

Of course, we can also change the arrangement, for example, if we set the direction property of body to rtl (right-to-left), the arrangement of elastic elements will also change, the layout of the page will also change, and all child elements will be arranged close to the left and arranged in reverse order.

1 、 flex-direction

The flex-direction attribute specifies the location of the elastic child element in the parent container. Its attribute value:

For example, we use row-reverse to reverse the child elements:

2. Justify-content attribute

The justify-content attribute is applied to the elastic container, aligning the elastic items along the principal axis (main axis) of the elastic container. In this way, we can better arrange our text, which has five values, such as:

The effect is as follows:

Space-between is usually used the most, it will make the elastic elements evenly distributed in the elastic box, and it is a responsive arrangement.

CSS3 multimedia queries can set different style rules for different media types, including monitors, portable devices, televisions, and so on. But these multimedia types are not friendly enough to support on many devices. At present, many devices such as Apple phones, Android phones, tablets and so on use multimedia queries. Like other media, such as printers, screen readers, etc., the compatibility is not very good.

Using the @ media query, you can define different styles for different media types.

@ media can set different styles for different screen sizes, especially if you need to set up a responsive page, @ media is very useful.

When you resize the browser, the page will also re-render the page according to the width and height of the browser.

For example, in our commonly used responsive page, we want to display the picture on the 500px with the largest media width, and if the rest of the media does not display, we can write:

This is the end of this article on "what are the advanced attributes of CSS3". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.