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

This article shares with you the content of a sample analysis of CSS attributes. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

1. Display:flex

Is it necessary to center the element?

You may find dozens of alternative answers through Google search, but in most cases you only need one.

.your-class-name {display: flex; justify-content: center; align-items: center;}

Display:flex; will align your child elements one by one in horizontal rows. To make it a vertical line, add flex-direction: column; to the end of the code.

Your principal axis is defined by flex-direction. Rows are the default values.

If you use justify-content: center;, the elements on the spindle will be aligned. For our code example, this means that the project will be centered horizontally.

Your cross axis is defined by align-items, which means that your elements are centered vertically.

Many attributes can be passed here, but I emphasize only one: justify-content: space-between;, so there will be no margin at the beginning or end of the line.

2.margin

This attribute determines the distance between some elements.

.your-class-name {margin-top: 16px; margin-right: 12px; margin-bottom: 16px;} / / shorthand.your-class-name {margin: 16px 12px;}

You can use margin-top, margin-right, etc., to attach attributes directly to the edge, or you can use a single margin attribute to overwrite everything:

Margin: {{top}} {{right}} {{bottom}} {{left}}

If you omit bottom, it will inherit top (see our example)! If left is omitted, it inherits right.

3. Padding

When it first appears, the fill seems to be similar to the margin.

Grammar is the same as margins, and so is shorthand.

So why do we need it?

Consider a physical suitcase. You want to write down this case.

However, you don't want to start writing in the upper left corner. You should indent your content a little bit.

The fill will be used here. The interior of our element is affected by filling.

However, if you have two pieces of luggage close to each other and want to leave space between them, you can use margins.

4. Background-color

This is a relatively simple method, but it is necessary. This property applies to most HTML components.

Background-color: blue;background-color: # 232323 political background color: rgb (255,255,128); background-color: rgba (255,255,128,0.5)

The range of attributes can range from the base color name to its HEX and RGB values (or even HSL).

RGBA is fascinating because it allows you to set opacity and color. Did you see 0.5? This means 50% transparency.

5.color

Color is similar to the background color, except that it affects the color of the text. Everything else is the same, even transparency.

6.opacity

But we can make everything transparent!

Opacity: 0.1; / / 10% visibilityopacity: 0.9; / / 90% visibility

This is useful for disabled states or interesting effects.

7.width

This is a very difficult question. Most of the time you don't want to have a fixed width. Ni should be designed for mobile devices, and you can use margins and padding to achieve it.

But sometimes you have to get fixed. So do you want to set the size of the icon to 24 pixels?

Besides, take a look at this article. Narrow down the page to explore. You will notice that it didn't come all the way.

This is the case because the entire page contains the max-width attribute. It's a good idea to surround it on your website.

8. Height

Because of the nature of our rolling direction, the height is much easier than the width.

However, you should use the preset height as little as possible. One place where you can do this is your title.

There are all other qualifiers, such as min-height and max-height.

9.cursor:pointer

Hover your mouse over any button on this page. Can you see how the cursor becomes a small hand?

The explanation is cursors: pointers. You should use it as long as you can get them to do something (buttons, links, etc.).

10. Font-size

This is easy to use and controls text size. If you are a complete beginner, I suggest you stick to px.

If you want to dig a little deeper, take a look at rem. In short, you set the default font size in px, and all other fonts are proportional to that number.

For example, if your base value is 16px, 2rem will be 32px.

11. Font-family

Are you looking for various fonts? Google Fonts is great, and it's easy to choose one, include it in your index.html, and add its name to font-family.

12.:hover

This adds any effect to an element when hovering.

.your-class-name:hover {cursor: pointer;}

Our example changes the cursor to a pointer.

Thank you for reading! This is the end of this article on "sample Analysis of CSS attributes". 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, you can share it out 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.