Different CSS gives you an idea of the various units in CSS

If the other shore bustling fall, who accompany me to see the sunset fleeting years

Writing in the front

Your mastery of CSS layout determines how fast you can develop pages in Web development. As Web technology continues to evolve, the number of ways to implement various layouts is endless.

Recently, I put together a series of articles in about half a month using shred time. This series summarizes the various layouts in CSS, their implementation methods and common techniques. This article series will give you a new understanding of CSS layout.

The navigation posts of this series can be entered by me, which can quickly jump to the articles you want to know (recommended favorites)

There are three types of units in the CSS:

  • Absolute unit: does not change due to the size of other elements.
  • Relative unit: Not a fixed measure, but a relative value determined by the size of other elements.
  • Other units: such as Angle, color, etc.

In the official document, there are only absolute and relative units. Other units in CSS also have the value or function of the unit function

Absolute unit

The absolute units in CSS are as follows

unit The name of the
cm cm
mm mm
q A quarter of a millimeter
in inches
pc Twelve o ‘clock type
pt point
px pixel

But the most common absolute unit is the px pixel. The rest is used sparingly.

Unit of relative length

A unit of relative length relative to something else, such as the font size of the parent element, or the size of the view port. The advantage of using relative units is that, with some careful planning, you can make the size of text or other elements correspond to the rest of the content on the page. Here are some of the more common relative units.

unit Relative to the describe
% The parent element The percentage
em In font-size, the font size relative to the parent element is used If the parent elementfont-size 是 20px, then2emis40px.emAccurate to three decimal places
ex Height of the character “x” exSmall letters in the current font environmentxThe height of the
ch The width of the number “0” chRefers to the number in the current font environment0The width of the
rem The font size of the root element If the root element font size20pxthen2remis40px
vh 1% of the window height vh Equal to the window height1/100For example, if the height of the browser is900px.1vhThe value is 09px
vw 1% of the window width vwIn the same way
vmin Windows smaller size 1% The smaller of the width and height of the viewport is100vmin
vmax View large size 1% In the width and height of the viewport, the larger is100vmax

Other units

The Angle

There are four main units of Angle

unit describe When is theta equal to a circle
deg The degree of 360degIs equal to a circle
grad The gradient 400gradIs equal to a circle
rad radian 2 PI radIs equal to a circle
trun turn 1turnIs equal to a circle

Fr unit

Fr is used to allocate the remaining space within a certain length.

color

rgb()

RGB is an abbreviation for red-green-blue. The RGB color mode is an industry standard for colors. It uses variations of the red, green, and blue channels and superimposes them on each other to produce a variety of colors.

hsl()

HSL is a short form of hue-saturation -Lightness, which means Hue-Saturation- brightness. HSL color mode is a representation of points in an RGB color model in a cylindrical coordinate system.

Using HSL color modes in CSS is achieved through the HSL (H, S, L) function

  • H represents tone (the basic property of color, commonly known as the color name), and its value ranges from 0 to an Angle of 360.
  • S represents saturation (saturation is the amount of gray in a color), and its value ranges from 0% to 100%.
  • L represents brightness (brightness is the amount of black in a color), and its value is expressed as a percentage. 0% for black, 50% for standard color and 100% for white.

rgba()

Add A on the original basis, where A is alpha and represents transparency.

hsla()

Add A on the original basis, where A is alpha and represents transparency.

HEX

Use a hexadecimal integer to specify the color

calc()function

CSS3 has a new calc() function that allows some calculations to be performed when CSS property values are declared. This function supports four operations. (The multiplication must have one multiplier that is a number, and the tree after/in division must be a number)

The calc() function also supports nested syntax.

The example code is as follows:

.banner {
  width: calc(100% - 80px);
}
Copy the code

Nested syntax

.foo {
  --widthA: 100px;
  --widthB: calc(var(--widthA) / 2);
  --widthC: calc(var(--widthB) / 2);
  width: var(--widthC);
}
Copy the code

Native CSS seems to support variables, have time to look at it