Author: A zen in Hanshui Temple
https://segmentfault.com/a/1190000022851543
1, – its – line – clamp
You can limit the contents of a block container to a specified number of lines. And displays “…” on the last line after the number of lines exceeds.
This is a normal presentation
display: -webkit-box; /* The value must be -webkit-box or -webkit-inline-box*/-webkit-box-orient: vertical; /* must be vertical*/-webkit-line-clamp: 2; /* Overflow: hidden; /* Overflow: hidden;Copy the code
This is the display with the addition of Line-clamp
https://developer.mozilla.org/zh-CN/docs/Web/CSS/-webkit-line-clamp
2, all
Reset all attributes except Unicode-bidi and direction to their original or inherited values.
all: unset; /*initial | inherit | unset* /Copy the code
Initial Changes the values of all attributes of the element to their initial values.
Inherit changes the value of the element to the value inherited from the parent element
Unset Reset to the inherited value of the parent element if the value of the attribute of the element is inheritable, otherwise changed to the original value.
3, box – decoration – break
https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-decoration-break
4, the caret – color
Used to define the color of the insertion cursor (caret), said the insertion cursor here, is that can be in the editor area of the website, used to indicate where the user input will be inserted into the specific of the flash is shaped like a vertical bar |.
caret-color: red;Copy the code
5, clip-path/shape-outside
The clip-path attribute uses clipping to create a displayable area of the element. The part inside the region is displayed, and the part outside the region is hidden. A similar clipping is SVG’s clipPath.
The clip-path can be in the following shapes
Inset (XXX): Cut to a rectangle
Circle (xx): Cropped to a prototype
Ellipse (XXX): Clipped to an ellipse
Polygon (xx): Cuts to a polygon
None: no cutting
Preparation before example
<div style="width: 500px; height: 500px; text-align: left; background-color:gray; color:white"> <img class="clip-mode" style="float: left; margin:20px" src="https://interactive-examples.mdn.mozilla.net/media/examples/balloon-small.jpg" width="150" /> We had agreed, my companion and I, that I should call forHe at his house, after dinner, not later than eleven o 'clockset of Parisian sportsmen, who have taken up “ballooning” as a pastime. After having exhausted all the sensations that are to be found inOrdinary sports, even those of "automobiling" at a breakneck speed, the members of the "Aero Club" now seekin the air, where they indulge in all kinds of daring feats, the nerve-racking excitement that they have ceased to find on earth.</div>Copy the code
Don’t cut
clip-path: none;Copy the code
Circular cut
clip-path: circle(40%); // The radius is 40%, and the center of the circle is centered by defaultCopy the code
Oval cut
clip-path: ellipse(130px 140px at 10% 20%);Copy the code
Polygon clipping
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);Copy the code
We can see how the shape is clipped above. The outside invisible box is always a rectangle, which means the text is always a rectangle around it.
So is there a way to get text to stick tightly around cropped graphics? If yes, use shape-outside
Shape-outside defines a shape that can be non-rectangular and around which adjacent inline content should be wrapped. By default, inline content surrounds its rectangular margin;
Default rectangle wrap
clip-path: none; shape-outside: noneCopy the code
Circle around
clip-path: circle(40%); shape-outside: circle(40%);Copy the code
Oval around
clip-path: ellipse(130px 140px at 10% 20%); shape-outside: ellipse(130px 140px at 20% 20%);Copy the code
Variable wrap
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);Copy the code
Of course you don’t have to use circles for circle clipping, you can use polygons for circle clipping, and diamonds for polygons for clipping. Anyway, there’s nothing between these two, they’re not pairwise matches. It’s up to you. Define it
6. Object-fit/object-position
The object-fit attribute specifies how the content of the replaceable element should fit into the box with the height and width specified for its use.
The object-position property specifies the alignment of the content object of the element to be replaced within the element box.
Note: Interchangeable elements include iframe, video, Embed, img, and some other interchangeable elements in feature cases, option, Audio, Canvas, object
Preparation before example
<div style="width: 300px; height: 300px; background-color:gray;"> <img class="clip-mode" style="height: 100%; width: 100%;" src="https://interactive-examples.mdn.mozilla.net/media/examples/plumeria.jpg"></div>Copy the code
The image must be set to 100% width and height, that is, cannot exceed the parent container, before you can set Object-fit, otherwise it is meaningless.
Fill the image will be pulled out of shape, and the width and height will be pulled to 100% of the parent container to fit the parent container
object-fit: fill;Copy the code
Contain image will not be distorted, the image will be scaled to its own scale, the entire image into the parent container, the shorter side will be automatically filled with white space.
object-fit: contain;Copy the code
The image will not be deformed, the image will be scaled according to its own proportion, the whole image into the parent container, according to the shortest edge of the image, into the parent container as the benchmark. The longer side will overflow
object-fit: cover;Copy the code
None is independent of the width and height of the parent container. Display the original aspect ratio of its image, based on the “center” of its own image, placed in the “center” position of the parent container.
object-fit: none;Copy the code
Scale-down content is the same size as one of None or contain, depending on which of them gets the smaller object.
object-fit: scale-down;Copy the code
Contain if the image is large, contain it; contain if it is small, none.
In the object-fit demonstration above, we found that the alignment of replaceable elements is automatic.
Such as object – fit: the fill; Is aligned with the upper-left corner of the parent container.
object-fit: none; Is aligned with the center of the parent container, and so on.
But do we want to manually change the alignment?
You can use the object-position attribute to specify the position of the replaceable element’s content in its content box.
object-position: 10px 10px; You can set px so that the first value represents the distance to the left of the parent container and the second value represents the distance to the top of the parent container. A single value represents only the distance to the left of the parent container. You can also set the % value, but this will only work if there is white space on either side. If there is no white space, it will not work if it happens to fill the parent element. Setting px doesn’t have such a problem, anything will work later.
object-position: right top; Can set the keywords, the first value key can be set (left | center | right), the second key word can be set up (top | center | bottom), the left or right now doesn’t mean distance at the top of the distance, and placed in what position of the parent element.
object-fit: fill; object-position: 50px 50px; // 10px to the left and 10% to the topCopy the code
Comparison before and after adding Object-position:
object-fit: contain; object-position: right top; // Stop to the upper right of the childCopy the code
Comparison before and after adding Object-position:
7, the font – stretch
Defining a normal or flexed font appearance for a font simply means choosing the most appropriate size for the font when there are multiple fonts to choose from.
Normal Default font
Semi -condensed, extra-condensed, and ultra-condensed are smaller than the default font
Semi-expanded, expanded, extra-expanded, and ultra-expanded are larger than the default fonts
8, the font – variant – caps
You can control the use of uppercase special characters.
-
Normal turns off the use of any special character variants.
-
Small-caps allows the use of small uppercase letters (OpenType feature: SMCP). A small uppercase letter is a letter in uppercase form that has the same size as the corresponding lowercase letter.
-
All-small-caps Converts all uppercase letters to small uppercase letters. OpenType feature: C2SC, SMCP.
-
Petite-caps allows the use of extremely small uppercase letters (OpenType feature: PCAP).
-
All-petite-caps converts all upper and lower case letters to small upper case letters. (OpenType feature: C2PC, PCAP)
-
Unicase allows conversion of uppercase letters to a mixture of small uppercase letters and plain lowercase letters (OpenType feature: UNIC).
-
Titling-caps allows capitalization of the first letter (OpenType feature: TITL). Uppercase variant characters are usually designed to be used with lowercase letters. In title sequences, using all capital letters can be too visual. Capital letters are used for this.
9, the font – variant – east – Asian
Controls the use of alternate symbols for East Asian characters (such as Japanese and Chinese, Korean, etc.).
There are several values:
normal; ruby; jis78; jis83; jis90; jis04; simplified; traditional; full-width; proportional-width
10, max-content/min-content/fill-available/fit-content
These values are available for width, height, min-width, min-height, max-width, and max-height attributes.
Display must be inline-block or block, otherwise the above values will not take effect.
fill-available
The elements fill the available space. The reference base is how wide and tall the parent element is.
Divs, like child elements, fill up to the width of the parent element, and fill-available can fill up not only the width but also the height.
The code before the example
<div style="width: 300px; height: 100px; background-color:gray;"> <span style="display:inline-block; background-color: burlywood;"> This is the content of the child element </span ></div>Copy the code
Set the span to a different performance when fill-available
What if there’s an element in there, img? It is also inline-block and should also satisfy the case.
We can see that the difference between img and SPAN is that when you set width or height, the entire image will scale to its own scale.
max-content
Its width or height is automatically adjusted to accommodate the element with the longest length (if the text is not wrapped) of the subelement. The reference base is how wide and high the child elements are.
<div class="parent"> <div class="current" style="width: 200px; height: 300px; background-color:gray;"> <p> This is a normal p element line with text </p> <img SRC ="https://interactive-examples.mdn.mozilla.net/media/examples/balloon-small.jpg"/> </div></div>Copy the code
The current div behaves differently when setting max-content.
min-content
Its width or height is automatically adjusted to accommodate the largest “minimum width” element in the subelement, and the remaining excess length is either newline or overflow reference based on how wide and high the “minimum width” of the subelement is.
What is a “minimum width value”? For pictures, the minimum width is the original width and height of the picture; If it is a string of Chinese characters, the minimum width value is the width and height of a single Chinese character. If it is a string of English words, the minimum width value is the longest word in the string.
fit-content
< span style = “color: RGB (50, 50, 50); line-height: 20px; font-size: 13px! Important; word-break: normal;”
The difference is that max-content is calculated according to the value of the text without newline. If the value exceeds the parent element, the scroll bar is generated directly without newline. Fit-content, on the other hand, does not generate a scrollbar after it exceeds the parent element.
11, fit – the content ()
This, unlike the fit-content value above, is a function used in the grid layout.
(abbreviated)
Look specifically at the grid layout.
12, the resize
Relatively simple, you can view
The official documentation
13, scroll – behaviors
When scrolling is triggered by the user through the API, the CSS property scrollbehavior specifies the scrolling behavior of a scroll box, whether it is smooth or immediate
Check out the official documentation
14、max() / min()
Max takes the maximum between the two; The min function minimizes between the two.
Max, min can be used anywhere where the value <length>, <frequency>, < Angle >, <time>, <percentage>, <number>, or < INTEGER > can be set
width: max(50vw, 300px); width: min(50vw, 300px);Copy the code
15, clamp ()
Clamp function takes the middle value between the three values defined, the size is in the middle, not the position.
clamp(MIN, VAL, MAX)
Like the Max and min functions, it can be used anywhere where the value of <length>, <frequency>, < Angle >, <time>, <percentage>, <number>, or < INTEGER > can be set
font-size: clamp(1px, 3px, 2px); // Intermediate values are 2pxfont-size: clamp(1px, 3px, 5px); // Intermediate values are 3pxfont-size: clamp(4px, 3px, 5px); // The median value is 4pxCopy the code
width: clamp(200rem, 25vw, 150px); // Take the middle value between these threeCopy the code
16, the conic – gradient ()
In gradients we know that there are:
-
Linear gradient,linear-gradient, is a linear transition of color from one direction to the other.
-
Radial base gradient, radial base gradient, radiates slowly outward along the ring from a certain point.
In addition, there is a gradient called “taper gradient”. It is a gradient that rotates in a fan direction around the central point (rather than radiating from the central point)
This is the difference between a cone and a radial gradient
background: conic-gradient(red, orange, black, green, blue);Copy the code
By default, the clock rotates clockwise from 12 o ‘clock
18, :out-of-range / :in-range
Relatively simple, you can check the official documentation
:out-of-range
:in-range
19, writing mode
Defines the horizontal or vertical layout of text and the writing direction of text in block-level elements
Horizontal-tb indicates horizontal writing, written from top to bottom
Vertical-rl means to write vertically, from right to left.
Vertical-lr is written vertically from left to right
Note that there is no horizontal-BT and don’t make things up
20, the inline – size
The same effect as the width and height of the element changes the size of the box. But it overwrites width, height.
The difference is that width is absolutely horizontal, height is absolutely vertical;
Inline-size is the relative horizontal direction, which can be changed by writing-mode
21, block size
Similar to inline-size, but opposite to inline-size, block-size defaults to height.