官术网_书友最值得收藏!

首頁 >

Web Developer's Reference Guide

Unit

CSS unit is a type of data with which we can define measurements, and it looks like this:

max-height: 150px;

Alternatively, it could also look like this:

transform: rotate(45deg);

There is no space between the number and the unit.

In most cases, the unit isn't required after the number 0 (zero).

There are several types of length units, such as described in the following explanations.

Relative length units

They are dependent on another element's length (usually, a parent element in the DOM) that relates directly to the element in question. When the other element's length changes, the length of the element in question maintains the defined proportion. In other words, there is no need to declare the length of the child element again.

Description

Relative units are always the best way to go if we want to build scalable systems. Setting values in a single element and then modifying that single element to affect the whole system saves a lot of time and many headaches.

ex

The ex suffix stands for an element's x-height. The ex CSS unit refers to the height of lowercase x. This height is dependent on the font. In other words, the heights can be different if we are using Arial than if we are using Verdana, even if the value is the same.

CSS:

.element {
  padding: 2ex;
}
ch

The ch suffix stands for character. The ch CSS unit refers to the width of the character 0 (zero). This width is dependent on the font. In other words, the widths can be different if we are using Arial than if we are using Verdana, even if the value is the same.

CSS:

.element {
  padding: 2ch;
}
em

The em suffix stands for the pronunciation of the letter m, and it represented the width of the lower case m in the print and typography industries. In CSS, the em unit represents a calculation of an element's font-size property.

This unit can be used together with many CSS properties, but the most common use is to define font-size elements.

However, many web designers and developers prefer to use rem units to avoid the inheritance issue em units have in nested elements (3-4 or more levels deep).

CSS:

.element {
  font: 1.5em Arial, Helvetica, san-serif;
}
rem

The rem suffix stands for the abbreviation of the term root element. The rem CSS unit represents the font size of the root element in a markup document. A markup document is not only an HTML document; it can also be an XML, SVG, or other markup-based document.

Granted that in this guide, we are referring to an HTML document, and since this is the case, the root element is the <html> element.

A very common practice is to set the font size on the <html> element to 62.5%. This way, when we're setting our font sizes for other elements, we can still think in pixels, but write in rem units to maintain the relative font size when scaling up or down our document in our responsive projects.

CSS:

html {
  font-size: 62.5%;
}
h1 {
  /*It's the same as 22px*/
  font-size: 2.2rem;
}
The % sign

The % sign is what it implies, percentage. In CSS em units and percentage units yield the same result. Percentage values, such as any of the other relative units, are dependent on another value, usually that of the parent element.

Like all other relative units, percentages and responsive web design go hand in hand.

CSS:

.element {
  margin: 0 1%;
}

Viewport-relative length units

These units relate to the viewport. If the viewport's dimensions change, the properties using viewport-relative length values adapt to the new dimensions of the view window.

Description

These units are a godsend in my book. They do what we would expect of fonts in a responsive world: enlarge or shrink according to the width or height of the viewport.

Let's check them out.

vh

The vh suffix stands for viewport height. The vh CSS unit relates to the height of the viewport. The value of vh is 1/100th of the height of the viewport.

For example, if we declare the font-size of an element as 1vh, and the browser window is 500px, the font size is then 5px.

CSS:

.element {
  font-size: 1vh;
}
vw

The vw suffix stands for viewport width. The vw CSS unit relates to the width of the viewport. The value of vw is 1/100th of the width of the viewport.

For example, if we declare the font-size of an element as 1vh, and the browser window is 1400px, the font size is then 14px.

CSS:

.element {
  font-size: 1vw;
}
vmin

The vmin suffix stands for viewport minimum. The vmin CSS unit relates to the smallest value of the viewport, of either its height or its width. The value of vmin is 1/100th of the side with the smallest length of the viewport.

For example, if we declare the font-size of an element as 1vmin and the browser's viewport is 600 × 800, the font size is then 6px.

CSS:

.element {
  font-size: 1vmin;
}
vmax

The vmax suffix stands for viewport maximum. The vmax CSS unit relates to the largest value of the viewport, of either its height or its width. The value of vmax is 1/100th of the side with the largest length of the viewport.

For example, if we declare the font-size of an element as 1vmax, and the browser's viewport is 600 × 800, the font size is then 8px.

CSS:

.element {
  font-size: 1vmax;
}

Absolute length units

These units represent a physical dimension of an element. Some units in CSS come from the printing world, and although it's not common to use them, it's important to know as much as we can about them.

Description

These types of units relate directly to a physical measurement. They work best when the output environment is known, like in print.

The most used absolute unit is the pixel (px). A pixel is known to be a single dot on a screen. The thing is that there is no industry standard for the size of that dot.

In other words, a pixel in a standard LED/LCD display (for example, a monitor or a TV) has different sizes than a pixel in a high-density screen. Even the pixel sizes between high-density screens are different.

Let's see what each abbreviation means, and at the end of the section, we'll be able to see a single example with all the units.

cm

The cm suffix stands for centimeter.

mm

The mm suffix stands for millimeter.

in

The in suffix stands for inch.

pc

The pc suffix stands for pica.

pt

The pt suffix stands for point.

px

The px suffix stands for pixel.

CSS:

All the following values represent units that resemble 16px font size, but in different length units.

/*Centimeter*/
.element { font-size: .43cm; }
/*Millimeter*/
.element { font-size: 4.3mm; }
/*Inch*/
.element { font-size: .17in; }
/*Pica*/
.element { font-size: 1pc; }
/*Point*/
.element { font-size: 12pt; }
/*Pixel*/
.element { font-size: 16px; }

Angle data types

These units represent angle values.

Description

These units are used whenever we want to rotate an element via the transform property.

Aside from the deg data type, the other angle data type units aren't really that common.

Let's check them out though.

deg

The deg suffix stands for degrees.

grad

The grad suffix stands for gradients.

rad

The rad suffix stands for radians.

turn

The turn suffix is not an abbreviation; it's the actual word turn. There is one turn in a full circle, so if we're going to make a horizontal rectangle rotate 90 degrees to make it vertical, we would define it as .25turn, because it's ?th of the complete turn.

CSS:

All the following values represent units that resemble a 90-degree turn of an element but in different angle data types:

/*Degrees*/
.element { transform: rotate(90deg); }
/*Gradians*/
.element { transform: rotate(100grad); }
/*Radians*/
.element { transform: rotate(89.535rad); }
/*Turn*/
.element { transform: rotate(.25turn); }

Resolution units

These units represent the screen density of pixels on any given output or device. Unlike relative and absolute units, it's necessary to add the unit to the value 0 (zero).

Description

Whenever we need to consider density screens, resolution units will do the heavy lifting for us. They are used in media queries.

Let's see how they work.

dpi

The dpi suffix stands for dots per inch. Screens contain 72 or 96 dpi, whereas a printed document has much larger dpi. 1 inch = 2.54 cm, so 1dpi≈ 0.39dpcm.

dpcm

The dpcm suffix stands for dots per centimeter. 1 inch = 2.54 cm, so 1dpcm≈ 2.54dpi.

dppx

The dppx suffix stands for dots per pixel. 1dppx = 96dpi due to the 1:96 fixed ratio of CSS pixels.

CSS:

/**@2x pixel ratio**/
/*Dots per inch*/
@media (min-resolution: 192dpi) { ... }
/*Dots per centimeter*/
@media (min-resolution: 75.5906dpcm) { ... }
/*Dots per pixel*/
@media (min-resolution: 2dppx) { ... }

Duration units

These units represent the duration of an animation in either seconds or milliseconds.

Description

These units are quite straightforward and are only used in CSS animations.

Tip

You may think that because all other units use two, three, or four letters in their abbreviation (px, dip, dpcm, and so on). Always remember: when declaring the seconds unit only one s is used. Using sec or secs is incorrect.

ms

The ms suffix stands for milliseconds. 1000ms= 1 second.

s

The s suffix stands for seconds. 1s = 1000 milliseconds.

CSS:

/*Milliseconds*/
.element { animation-duration: 3ms; }
.element { transition: .003s; }

/*Seconds*/
.element { animation-duration: 3s; }
.element { transition: 3000ms; }

Column

CSS columns is the most versatile way to fluidly distribute long strings of content while retaining scalability. If the content grows or is reduced, it would automatically reflow in the available space of the declared columns.

Although not necessarily ideal, actual elements such as DIVs can also be distributed in columns with the CSS columns property.

Let's pe in.

column-count

The column-count CSS property defines the number of columns of an element, and it looks like this:

column-count:3;
Description

We can use either a number value or the keyword auto.

When we use the auto keyword, we're letting the browser decide how many columns can fit within the available space. This is a very powerful and robust solution for responsive layouts. However, it is required that we declare column-width for this to work.

CSS:

/*Let the browser decide*/
.element {
 column-count: auto;
  column-width: 200px;
}
/*Specific number of columns*/
.element {
 column-count: 3;
}
column-fill

The column-fill CSS property controls how the content is assigned across columns, and it looks like this:

column-fill: balance;
Description

There are two keywords: auto and balance.

  • auto: This means that the content is filled sequentially. Basically, as space becomes available, the content will start filling it. This makes the parent container grow vertically by making the columns taller in order to fit the content.
  • balance: This means that the content will be equally distributed in the available columns. For this to work, we need to declare a height on the parent container. This will make sure that the columns are of the specific height as well. The problem with this is that the content will just keep flowing outside the parent container if the parent container becomes too small.

CSS:

/*Balance*/
.element {
 column-fill: balance;
  column-count: 4;
  height: 400px;
}
/*Auto*/
.element {
 column-fill: auto;
  column-count: 4;
}
column-gap

The column-gap CSS property defines the space between columns. In editorial terms, this space is the "gutter", and it looks like this:

column-gap: 50px;
Description

There are two values: the auto keyword and a length value.

  • auto: This is the default value defined by the spec, which is 1em.
  • Length value: We define this using px or em.

CSS:

/*Auto = 1em*/
.element {
 column-gap: auto;
  column-count: 4;
}
/*Length value: px or em*/
.element {
 column-gap: 50px;
  column-count: 4;
}
column-rule

The column-rule CSS property creates or draws a vertical line that "separates" the columns, and it looks like this:

column-rule: 2px solid black;
Description

We can define three aspects of the column-rule CSS property: the thickness or width; the style, which are the same styles of the border-style property; and color.

The column-rule CSS property is the shorthand of the following properties:

  • column-rule-width: This can be just a length value (a number), or we can use any of these keywords: thin, medium, or thick.
  • column-rule-style: This can be any of the border-style values, such as dotted, dashed, inset, and so on.
  • column-rule-color: This is a color defined in any format: HEX, RGB, or HSL. It also supports alpha channel, so RGBa and HSLa are allowed.

CSS:

/*Length, solid line and RGBa*/
.element {
  column-gap: auto;
  column-count: 4;
 column-rule: 2px solid rgba(0, 0, 0, .3);
}
/*Keyword, dotted and color name*/
.element {
  column-gap: 50px;
  column-count: 4;
 column-rule: thick dotted black;
}
column-rule-color

The column-rule-color CSS property defines the color of the piding line between columns.

Colors can be defined in any format: HEX, RGB, or HSL. It also supports alpha channel, so RGBa and HSLa are allowed.

CSS:

.element {
  column-rule-color: red;
}
column-rule-style

The column-rule-style CSS property defines the style of the piding line between columns.

It can be any of the border-style values, for example, dotted, dashed, inset, and so on.

CSS:

.element {
  column-rule-style: dotted;
}
column-rule-width

The column-rule-width CSS property defines the thickness (width) of the piding line between columns.

It can be just a length value (a number), or we can use any of these keywords: thin, medium, or thick.

CSS:

.element {
  column-rule-width: 5px;
}
column-span

The column-span CSS property makes an element that's supposed to behave like a column into an element that spans across all columns. The element is still a "column", but it now expands the full width of the columns, like a block element.

There are two values, none and all, which are self-explanatory.

CSS:

.element {
  column-span: all;
}

Here is a demo in CodePen: http://tiny.cc/column-span

column-width

The column-width CSS property defines the width of the columns.

When we define the width of the columns, the browser will automatically add or remove columns depending on the available space.

For example, if we say our columns are 200px wide and the parent container is 800px, then the browser will include three columns (taking into account the default column-gap of 1em). However, if the container is at least 450px wide, the browser will fit two columns.

CSS:

/*em value*/
.element {
  column-width: 10em;
}
/*px value*/
.element {
  column-width: 200px;
}
columns

The columns CSS property is the shorthand that we can use to set column-width and column-count.

It can accept either one or two values in the same declaration. The order of the values doesn't matter, but it's a good measure to declare column-width first and column-count second.

CSS:

/*column-width and then column-count*/
.element {
  columns: 300px 2;
}
主站蜘蛛池模板： 临桂县| 重庆市| 兴山县| 扎赉特旗| 平远县| 昌黎县| 大足县| 盖州市| 涟水县| 霞浦县| 奉新县| 安阳县| 连州市| 连山| 成安县| 富蕴县| 侯马市| 满城县| 中宁县| 合作市| 陵川县| 且末县| 雷山县| 资源县| 宁德市| 安徽省| 四会市| 通山县| 安国市| 名山县| 合山市| 扎兰屯市| 达孜县| 淅川县| 视频| 武定县| 信阳市| 清水县| 平原县| 越西县| 龙胜|