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.