m-lamonaca/dev-notes
1
0
Fork 0
mirror of https://github.com/m-lamonaca/dev-notes.git synced 2025-04-08 11:56:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add notes on CSS units

Browse source
This commit is contained in:
Marcello Lamonaca 2021-05-18 12:05:45 +02:00
parent b2cd836431
commit 965a1936b4
1 changed files with 49 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
CSS/CSS.md
View file

@ -350,6 +350,34 @@ a::after/before {
`selector::selection {...}` identifies part of the document that has been selected, or highlighted, by a user’s actions. `selector::selection {...}` identifies part of the document that has been selected, or highlighted, by a user’s actions.
`selector::-moz-selection {...}` Mozilla prefixed fragment pseudo-element has been added to ensure the best support for all browser. `selector::-moz-selection {...}` Mozilla prefixed fragment pseudo-element has been added to ensure the best support for all browser.
## Units
### Absolute Length units
| Unit | Name | Equivalent to |
| ---- | ------------------- | -------------------- |
| cm | centimeters | 1cm = 38px = 25/64in |
| mm | Millimeters | 1mm = 1/10th of 1cm |
| Q | Quarter-millimeters | 1Q = 1/40th of 1cm |
| in | Inches | 1in = 2.54cm = 96px |
| pc | Picas | 1pc = 1/6th of 1in |
| pt | Points | 1pt = 1/72th of 1in |
| px | Pixels | 1px = 1/96th of 1in |
### Relative Length Units
| Unit | Relative to |
| ---- | ------------------------------------------------------------------- |
| rem | Font size of the root element. |
| em | Font size of the parent or the element itself |
| ex | x-height of the element's font. |
| ch | The advance measure (width) of the glyph "0" of the element's font. |
| lh | Line height of the element. |
| vw | 1% of the viewport's width. |
| vh | 1% of the viewport's height. |
| vmin | 1% of the viewport's smaller dimension. |
| vmax | 1% of the viewport's larger dimension. |
## Element Properties ## Element Properties
### Color ### Color
@ -566,28 +594,28 @@ selector {
### Absolute Lengths ### Absolute Lengths
Symbol | Unit | Symbol | Unit |
-------|----------------------------- | ------ | ---------------------------- |
`cm` | centimeters | `cm` | centimeters |
`mm` | millimeters | `mm` | millimeters |
`in` | inch (1 in = 96px = 2.54 cm) | `in` | inch (1 in = 96px = 2.54 cm) |
`px` | pixel (1 px = 1/96 of 1 in) | `px` | pixel (1 px = 1/96 of 1 in) |
`pt` | points (1 pt = 1/72 of 1 in) | `pt` | points (1 pt = 1/72 of 1 in) |
`pc` | picas (1 pc = 12 pt) | `pc` | picas (1 pc = 12 pt) |
### Relative Lengths ### Relative Lengths
Symbol | Unit | Symbol | Unit |
-------|------------------------------------------------------------------------------------------ | ------ | ----------------------------------------------------------------------------------------- |
`em` | Relative to the font-size of the element (2em means 2 times the size of the current font) | `em` | Relative to the font-size of the element (2em means 2 times the size of the current font) |
`ex` | Relative to the x-height of the current font (rarely used) | `ex` | Relative to the x-height of the current font (rarely used) |
`ch` | Relative to width of the "0" (zero) | `ch` | Relative to width of the "0" (zero) |
`rem` | Relative to font-size of the root element | `rem` | Relative to font-size of the root element |
`vw` | Relative to 1% of the width of the viewport* | `vw` | Relative to 1% of the width of the viewport* |
`vh` | Relative to 1% of the height of the viewport* | `vh` | Relative to 1% of the height of the viewport* |
`vmin` | Relative to 1% of viewport's* smaller dimension | `vmin` | Relative to 1% of viewport's* smaller dimension |
`vmax` | Relative to 1% of viewport's* larger dimension | `vmax` | Relative to 1% of viewport's* larger dimension |
`%` | Relative to the parent element | `%` | Relative to the parent element |
## CSS Cascading ## CSS Cascading
@ -822,7 +850,7 @@ There are several methods to 'hide' elements:
`opacity: 0` hides the element, still takes up space in the layout, events work `opacity: 0` hides the element, still takes up space in the layout, events work
| Rule | Collapse | Events | Tab Order | | Rule | Collapse | Events | Tab Order |
|----------------------|----------|--------|-----------| | -------------------- | -------- | ------ | --------- |
| `display: none` | Yes | No | No | | `display: none` | Yes | No | No |
| `visibility: hidden` | No | No | No | | `visibility: hidden` | No | No | No |
| `opacity: 0` | No | Yes | Yes | | `opacity: 0` | No | Yes | Yes |
@ -1124,7 +1152,7 @@ The HTML code is not changed, only the CSS style.
A media query is a logical expression: true or false; if a media query is true, the related rules are applied to the target device. A media query is a logical expression: true or false; if a media query is true, the related rules are applied to the target device.
| Type | Used For | | Type | Used For |
|----------|----------------------------------------------| | -------- | -------------------------------------------- |
| `all` | all media type devices | | `all` | all media type devices |
| `print` | printers | | `print` | printers |
| `screen` | computer screens, tablets, smart-phones, etc | | `screen` | computer screens, tablets, smart-phones, etc |