Small css details, css details

Small css details, css details

 

When you are free, I will summarize some small css details that may not be known to everyone.

1. line-height

Many vertices, line-height is the meaning of the line height, we often use code like line-height: 24px; To set the absolute line height. However, when our demand changes and the font size changes, we may need to change the Row Height again. Now we can directly set the Row Height by setting numbers, when we use a pure number to set the Row Height, It is a multiple of the font size, that is, the actual Row Height of h4 is also 12 * 2px, Which is 24px. The advantage of this setting is that when we change the font size, the row height will automatically change.

p{ font-size:12px; line-height:24px; }h4{ font-size:12px; line-height:2; }

　

2. backgroud-clip and backgroud-origin

Background-clip: border-box | padding-box | content-box;

This attribute specifies the areas in which the background can be displayed, but it is irrelevant to the position where the background starts to be drawn. The position of the background can appear in areas where the background is not displayed, this is equivalent to cropping a part of the area where the background image is not displayed. Simply put, it specifies the location where the background can be overwritten.

Background-origin: padding-box | border-box | content-box;

This attribute specifies the region where the background is drawn (border, padding, or content), but it only controls the position where the background is drawn. You can use this attribute to draw the background on the border, however, if the background on the border is not displayed, it is determined by the background-clip. Simply put, it specifies the position where the background is displayed.

3. border-radius

We all use border-radius to create a rounded corner or ball shape, but few people know that it can specify the horizontal and vertical radius of the angle. We only need to use/to separate the two values. In this way, we can easily implement an elliptical shape.

.div1{width: 200px; height: 150px;border-radius: 100px/75px;background-color:#000;}

　　

In addition, when we set the value by percentage, it will parse the value based on the width and height of the element itself, that is, the above Code can actually be written like this.

.div1{width: 200px; height: 150px;border-radius: 50%/50%;
　　　　 /* border-radius: 50%; */background-color:#000;}

　　

4. animation-delay

At w3c, we can see when the animation starts with the animation-delay attribute definition. The value of animation-delay is measured in seconds or milliseconds.

And: It prompts that we can use a negative value to define this attribute. For example, when we use-2 s to define this attribute, it seems that the animation has been played for two seconds at the beginning.

 

5. box-shadow

We will all use box-shadow to add shadows to our box, such as: box-shadow: 3px 3px 4px rgba (, 0,. 3 );

However, when we only need a shadow direction, we may add a layer of structure to use overflow hiding. In fact, box-shadow has a fourth length parameter, called the expansion radius. In addition, we can use a negative value to offset the Blur radius. We can see these two effects.

.div1{width: 200px; height: 150px;
　　　　 border: 1px solid #ddd;
        box-shadow: 0 5px 4px #000;

}

　　

.div1{width: 200px; height: 150px;border: 1px solid #ddd;box-shadow: 0 5px 4px -4px #000;}

　　

By using the fourth length parameter, we can easily implement one side shadow. We can also think of the implementation of shadows on both sides of the side.

.div1{width: 200px; height: 150px;border: 1px solid #ddd;box-shadow: 0 5px 4px -4px #000,0 -5px 4px -4px #000;}

　　

 

 

6.css triangle

Triangles are commonly used in pages. Sometimes we will cut the graph, but in fact we can use simple css to implement the drop-down similar to the simulated drop-down type. If we have good mathematics, we will talk about it from all angles.

        i{ width: 0; height: 0; float: left; margin:20px; }        .up {            border-left: 20px solid transparent;            border-right: 20px solid transparent;            border-bottom: 40px solid #000;        }        .down {            border-left: 20px solid transparent;            border-right: 20px solid transparent;            border-top: 40px solid #000;        }        .left {            border-top: 20px solid transparent;            border-bottom: 20px solid transparent;            border-right: 40px solid #000;        }        .right {            border-top: 20px solid transparent;            border-bottom: 20px solid transparent;            border-left: 40px solid #000;        }        .top-left {            border-top: 40px solid #000;            border-right: 40px solid transparent;        }        .top-right {            border-top: 40px solid #000;            border-right: 40px solid transparent;        }        .bottom-left {            border-bottom: 40px solid #000;            border-right: 40px solid transparent;        }        .bottom-right {            border-bottom: 40px solid #000;            border-right: 40px solid transparent;        }        

You can understand it from the following. Triangle angle... I won't say much here...

 

7. cursor

The value of cursor is not just pointer. We can use different cursors based on different scenarios. You can try to see below from w3c:

Value	Description
Url	The URL of the custom optical indicator to be used. Note: always define a normal cursor at the end of this list to prevent any available cursor defined by the URL.
Default	Default cursor (usually an arrow)
Auto	Default value. The cursor set by the browser.
Crosshair	The cursor is displayed as a cross line.
Pointer	The cursor is a pointer indicating the Link (one hand)
Move	This cursor indicates that an object can be moved.
E-resize	This cursor indicates that the edge of the rectangle can be moved to the right (East.
Ne-resize	This cursor indicates that the edge of the rectangle box can be moved up and right (North/East ).
Nw-resize	This cursor indicates that the edge of the rectangle can be moved up and left (North/West ).
N-resize	This cursor indicates that the edge of the rectangle box can be moved up (North.
Se-resize	This cursor indicates that the edge of the rectangle box can be moved down and to the right (South/East ).
Sw-resize	This cursor indicates that the edge of the rectangle can be moved down and left (South/West ).
S-resize	This cursor indicates that the edge of the rectangle can be moved down (South ).
W-resize	This cursor indicates that the edge of the rectangle can be moved to the left (West ).
Text	This cursor indicates the text.
Wait	This cursor indicates that the program is busy (usually a table or hourglass ).
Help	This cursor indicates available help (usually a question mark or a balloon ).

 

8. box-shadow Mask Layer

How to easily implement a mask layer without adding elements or too much code (in this solution, the mask layer cannot add events ).

　　　　.div1{            position: absolute;            top: 50%;            left: 50%;            transform: translate(-50%, -50%);            width: 100px;            height: 100px;            background-color:#fff;            box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.8);        }

 

9. steps ()

Steps () is a timing function that allows us to divide an animation or transition into segments, rather than transition from one state to another.

Steps has two parameters

The first one must be completed in several steps.

The second has two values.

1. The first frame of start is the animation End of the first step.

2. The first frame of end is the first animation.

He is very useful in our animation. If you are interested, you can moveExplanation of steps () usage in css Animation

Here I also made a small demo Based on the content on the Internet:

<! DOCTYPE html> 

Not complete to be continued ~~~