TechBlogSD - Все для WordPress і WEB розробки
WEB і WordPress інструкції, новини, огляди тем та плагінів

Підручник з одиниць CSS

4

Вимірювання таких властивостей, як розмір шрифту, висота рядка, поле, відступ, ширина, висота тощо, здійснюються в CSS за допомогою одиниць довжини. У CSS використовуються чотири основні типи одиниць довжини – відносна, абсолютна, кут і час. У цій статті разом з прикладами дослідимо, як працюють ці одиниці довжини.

Пов’язані: Як створити віджет прокрутки до верху за допомогою CSS та jQuery?

Одиниці відносної довжини

в Обчислюється щодо поточного розміру шрифту батьківського елемента. Наприклад, 2em вказує в 2 рази більший розмір розміру шрифту поточного елемента.
екс Розраховано відносну висоту поточного розміру шрифту.
px Розмір пікселів розраховується щодо пристрою перегляду. Для пристроїв з низькою роздільною здатністю 1 піксель – це одна точка на дисплеї. Для екранів з високою роздільною здатністю 1 піксель може означати декілька пікселів пристрою.
% Відсоткове значення щодо будь -якого елемента. Наприклад, ширина контейнера 50%.
рем Відносно розміру шрифту кореневого елемента.
vw Вимірюється у відсотках до ширини вікна перегляду. Якщо ширина вікна перегляду становить 100 см, то 1 vw = 1 см.
vh Вимірюється як відсоток значення висоти вікна перегляду. Якщо висота вікна перегляду становить 100 см, то 1 зв = 1 см.
vmin Відсоткове значення меншого розміру вікна перегляду. Він підтримується як “vm” у версіях Internet Explorer 9 і вище.
vmax Відсоткове значення більшого розміру вікна перегляду. Це не підтримується IE.
ch Вимірюється відносно ширини нуля (0).

Internet Explorer не підтримує “vmin” та “vmax”. Нестандартний пристрій "vm" підтримується IE 9 або пізнішої версії. Він обчислює відносне значення, враховуючи мінімум висоти або ширини вікна перегляду.

Одиниці абсолютної довжини

в Абсолютне значення в дюймах. 1 дюйм = 2,54 сантиметра.
см Сантиметри
mm Міліметри
за Очки (1 бал = 1/72 дюйма)
ПК Фото (1 фото = 12 балів)

Кутові одиниці

ти Ступінь
1 с Градіани
робота Радіани
поворот Повороти

Одиниці часу

Приклади

Нижче наведено деякі приклади того, як різні одиниці довжини CSS впливають на відображення текстового вмісту. В основному ми показали відносні та абсолютні значення, оскільки одиниці кута/часу не застосовуються до текстового вмісту.

Це шрифт розміром 2em. Розмір шрифту елемента становить 18 пікселів, тому цей рядок відносно обчислюється як 36 пікселів (2 × 18).

Це шрифт розміром 20 пікселів і червоним кольором.

Це шрифт розміром 36 пікселів та синього кольору. Це еквівалентно розміру 2em, оскільки розмір шрифту елемента-18 пікселів.

Це шрифт розміром 18 пікселів та зеленого кольору. Ширина обмежена 50% загальної ширини елемента. Ми додаємо більше вмісту, щоб показати, що ширина обмежена порівняно з попередніми реченнями.

Цей рядок створюється зі значенням font-size = 2ex.

Цей рядок створюється зі значенням font-size = 2rem, що в 2 рази перевищує значення пікселя кореневого елемента 36px (2 × 18).

Цей рядок створюється зі значенням font-size = 15vh. Змініть розмір висоти браузера, щоб побачити, як змінюється цей текст.

Цей рядок створюється з абсолютним значенням розміру шрифту = 0,5 см.

Цей рядок створюється з абсолютним значенням font-size = 2pc.

Пов’язані: Підручник з моделі коробки CSS для початківців.

Одиниці вимірювання кута та часу

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

.image { transform: rotate(10rad); transition-duration: 2s; }

Що потрібно пам’ятати при використанні одиниць довжини в CSS

Нижче наведено деякі важливі моменти, які слід пам’ятати при використанні блоків CSS:

  • Зазвичай значення "em" та "rem" використовуються для створення хороших макетів.
  • “Em” відносно атрибута font-size батьківського елемента. 2em вказує в 2 рази більший розмір шрифту поточного елемента.
  • "Px" відносно роздільної здатності пристрою перегляду.
  • "%" Відносно іншого значення одиниці довжини.
  • Усі одиниці довжини CSS підтримуються усіма основними браузерами, такими як Chrome, Firefox, IE, Safari та Opera.
  • Значення, обчислені за допомогою "em", відносно батьківського елемента, тому їх слід обережно використовувати при вкладенні декількох елементів, щоб уникнути несподіваних результатів. Найпростіший спосіб – використати “rem”, який базується на розмірі кореневого елемента.
  • Усі одиниці CSS вимірюються без проміжків між значенням та одиницею вимірювання.
  • Значення довжини нуль (0) не вимагає ідентифікатора. Наприклад, "margin = 0;" це правильний спосіб визначення, а не "margin = 0px;".

Пов’язані: Як створити паралакс -сторінку на всю ширину за допомогою CSS?

Джерело запису: webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі