Які із CSS величин є відносними

0 Comments

CSS Одиниці

Багато властивостей CSS мають такі значення “length”, як width , margin , padding , font-size тощо.

Length (довжина) — це число, за яким іде одиниця вимірювання довжини, наприклад 10px , 2em тощо.

Приклад

Встановіть різні значення довжини, використовуючи px (пікселі):

p font-size: 25px;
line-height: 50px;
>

Примітка: Між номером і одиницею не може бути пробілу. Однак якщо значення дорівнює 0 , одиницю можна пропустити.

Для деяких властивостей CSS дозволена від’ємна довжина.

Існує два типи одиниць вимірювання довжини: абсолютна та відносна.

Абсолютні довжини

Абсолютні одиниці вимірювання довжини є фіксованими, і довжина, виражена в будь-якій із них, відображатиметься як саме такий розмір.

Абсолютні одиниці вимірювання довжини не рекомендовано використовувати для відображення на екрані, оскільки розміри екрана дуже різні. Однак їх можна використовувати, якщо відомий носій виводу, наприклад, для макета друку.

ОдиницяОпис
cmсантиметри Спробуй це
mmміліметри Спробуй це
inдюйми (1in = 96px = 2.54cm) Спробуй це
px *пікселі (1px = 1/96th of 1in) Спробуй це
ptпункти (1pt = 1/72 of 1in) Спробуй це
pcпікаси (1pc = 12 pt) Спробуй це

* Пікселі (px) відносяться до пристрою перегляду. Для пристроїв із низькою роздільною здатністю 1 піксель — це один піксель пристрою (точка) дисплея. Для принтерів і екранів з високою роздільною здатністю 1 піксель означає кілька пікселів пристрою.

Відносні довжини

Одиниці відносної довжини визначають довжину відносно іншої властивості довжини. Одиниці відносної довжини краще масштабуються між різними засобами візуалізації.

ОдиницяОпис
emВідносно розміру шрифту елемента (2em означає 2-кратний розмір поточного шрифту)Спробуй це
exВідносно x-висоти поточного шрифту (використовується рідко)Спробуй це
chВідносно ширини “0” (нуль)Спробуй це
remВідносно розміру шрифту кореневого елементаСпробуй це
vwВідносно 1% ширини вікна перегляду*Спробуй це
vhВідносно 1% висоти вікна перегляду*Спробуй це
vminВідносно 1% меншого розміру вікна перегляду*Спробуй це
vmaxВідносно 1% більшого розміру вікна перегляду*Спробуй це
%Відносно батьківського елементаСпробуй це

Підказка: Модулі em та rem практичні для створення ідеально масштабованого макета!
* Viewport = розмір вікна браузера. Якщо вікно перегляду має ширину 50 см, 1vw = 0.5см.

Підтримка браузерами

Числа в таблиці вказують на першу версію браузера, яка повністю підтримує одиницю вимірювання довжини.

Одиниця вимірювання довжини
em, ex, %, px, cm, mm, in, pt, pc1.03.01.01.03.5
ch27.09.01.07.020.0
rem4.09.03.64.111.6
vh, vw20.09.019.06.020.0
vmin20.012.019.06.020.0
vmax26.016.019.07.020.0

CSS ‘>’ selector; what is it? [duplicate]

I’ve seen the “greater than” ( > ) used in CSS code a few times, but I can’t work out what it does. What does it do?

77.9k 109 109 gold badges 165 165 silver badges 269 269 bronze badges
100k 50 50 gold badges 172 172 silver badges 208 208 bronze badges

7 Answers 7

> selects immediate children

For example, if you have nested divs like such:

and you declare a css rule in your stylesheet like such:

your rules will apply only to those divs that have a class of “middle” since those divs are direct descendants (immediate children) of elements with class “outer” (unless, of course, you declare other, more specific rules overriding these rules). See fiddle.

 
div.outer - This is the parent.
div.middle - This is an immediate child of "outer". This will receive the orange border.
div.inner - This is an immediate child of "middle". This will not receive the orange border.
div.middle - This is an immediate child of "outer". This will receive the orange border.
div.inner - This is an immediate child of "middle". This will not receive the orange border.

Without Words

.
.

Side note

If you, instead, had a space between selectors instead of > , your rules would apply to both of the nested divs. The space is much more commonly used and defines a “descendant selector”, which means it looks for any matching element down the tree rather than just immediate children as the > does.

NOTE: The > selector is not supported by IE6. It does work in all other current browsers though, including IE7 and IE8.

If you’re looking into less-well-used CSS selectors, you may also want to look at + , ~ , and [attr] selectors, all of which can be very useful.

This page has a full list of all available selectors, along with details of their support in various browsers (its mainly IE that has problems), and good examples of their usage.