Що ви не знаєте про розрахунок відсоткових полів у CSS
Більшість веб-дизайнерів вважають, що вони добре знають CSS. Зрештою, не так вже й багато - кілька типів селекторів, кілька десятків властивостей і деякі каскадні правила, які вам майже не потрібно пам'ятати, оскільки вони зводяться до здорового глузду. Але коли ви дістаєтеся до рівня дрібниць, є багато незрозумілих деталей, які мало хто розуміє дизайнерів.
Коли я вивчав результати безкоштовного тестування CSS, який я пропонував у мережі протягом останніх шести місяців, я виявив одне питання, яке майже ніхто отримали право. З тисяч людей, які пройшли тест, менше 14% отримали це право.
Питання зводиться до цього: Як розрахувати відсоткові межі?
Питання
Скажімо, ваш сайт має контейнер div, і всередині цього, зміст div:
Тепер давайте дамо цей зміст div верхня межа:
.зміст margin-top: 10%;
Добре, так це 10%… але 10% що? Це питання лише 13,8% можуть відповісти правильно. І майте на увазі: ці люди мають доступ до Google!
Що мені подобається в цьому питанні, це те схоже, відповідь має бути очевидною. Настільки, що я підозрюю, що більшість людей просто здогадуються (і здогадуються). Але, можливо, це ні здається вам очевидним. Я маю на увазі, якщо ви дійсно використовуєте свою уяву, існує багато способів, якими браузер міг би розрахувати маржу, як це.
Так як щодо того, якщо я звужу його для вас, оскільки питання в тесті насправді є множинним вибором. Ось ваші варіанти:
- 10% від висоти вмісту div
- 10% від висоти контейнера div
- 10% ширини вмісту div
- 10% від ширини контейнера div
Пам'ятайте, що правильна відповідь з цього списку може вибрати лише 13,8% людей. Це набагато гірше, ніж шанс!
Придивіться до відповідей; ви побачите, що насправді потрібно знати лише дві речі:
Контейнер або вміст?
По-перше, це розмір маржі, заснований на розмірі самого вмісту div, або на розмірі контейнера div?
Тепер це не gimme, але ви, ймовірно, можете довіряти своїм інстинктам. Якщо я встановлюю div на 50% ширини його контейнера, а потім я хочу, щоб його лівий і правий поля заповнювали решту простору, я б, звичайно, встановлював їх на 25% кожен (так що відсотки складають до 100%). Для того, щоб працювати, відсоткові межі повинні базуватися на розмірах контейнера.
Звичайно, дві третини людей, які проходять тест, отримують цю частину відповіді правильно.
Ширина або висота?
Друге, розмір поля верхньої межі залежно від ширини або висоти цього елемента?
Якщо ви звернули увагу, ви, мабуть, вже на вашій сторожі. Для того, щоб так мало людей підібрали правильну відповідь, це має бути хитромудне питання?
І все ж, я впевнений, що ви навряд чи можете повірити в це відповідь не є висота. Ну, це не так.
Так, ми говоримо про верхню межу. Так, розмір цього поля є вертикальним вимірюванням. Так, якщо блок становить 50% від висоти контейнера, і ви надали йому верхню межу 25%, ви очікуєте, що це буде 25% від висоти контейнера. І ви помилитеся.
Не погано, якщо ви думали, що вона повинна бути висотою. Майже 80% людей, які проходять тестування, погоджуються з вами:
Це робить сенс… Ні, Дійсно!
Досі не вірите? Ось цитата з специфікації CS3 W3C:
Відсоток розраховується по відношенню до ширини блоку, що формується. Зауважте, що це справедливо і для верхнього та нижнього країв.
Те ж саме стосується верхньої та нижньої підкладки, у випадку, якщо вам було цікаво. Що стосується меж, то заборонено вказувати їхню ширину у відсотках.
Отже, на даний момент, ви, напевно, думаєте, що творці CSS теж є боляче, або вони просто зробили дійсно тупу помилку. Але я тут, щоб сказати вам, що є дві вагомі причини для того, щоб базувати вертикальні поля на ширині блоку:
Горизонтальна і вертикальна узгодженість
Є, звичайно, скорочена властивість, яка дозволяє вказати маржу для всіх чотирьох сторін блоку:
маржа: 10%;
Це розширюється до:
margin-top: 10%; маржа-право: 10%; margin-bottom: 10%; маржа-ліворуч: 10%;
Тепер, якщо ви написали одне з перерахованих вище, ви, мабуть, очікуєте, що поля на всіх чотирьох сторонах блоку будуть однакового розміру, чи не так? Але якщо маржа-ліва і маржа-право були засновані на ширині контейнера, а маржа-верх і маржа-дно базувалися на його висоті, то вони зазвичай були б різними!
Уникнення циркулярної залежності
CSS викладає вміст у блоках, розташованих вертикально вниз по сторінці, тому ширина блоку зазвичай продиктована шириною його батьківського. Іншими словами, ви можете розрахуйте ширину блоку, не турбуючись про те, що всередині цей блок.
Висота блоку - це інша справа. Зазвичай, висота залежить від комбінованої висоти її вмісту. Змініть висоту вмісту, і ви зміните висоту блоку. Дивіться проблему?
Щоб отримати висоту вмісту, потрібно знати верхню і нижню поля, які застосовуються до неї. І якщо ці поля залежать від висоти батьківського блоку, у вас виникли проблеми, оскільки ви не можете обчислити один з них, не знаючи іншого!
На підставі вертикальних полів ширина контейнера розбиває цю кругову залежність і дає можливість викласти сторінку.
Ace клас
Так що у вас є: найважче питання на тесті, і тепер ви можете відповісти на нього. Хочете знати, як ви будете робити решту тесту? Спробуйте самостійно. Я обіцяю, що більшість питань набагато простіше, ніж цей.
Тим часом я шукаю нового найжорсткого питання! Які деталі CSS, на вашу думку, ніхто не знає?
Примітка редактора: Це написано для Hongkiat.com від Кевін Янк. Кевін писав про павутину з 1999 року, з його книгами на PHP, CSS і JavaScript. Він також проводив подкасти, які виступали на конференціях, і проводили відео-тренінг, все про Інтернет. Тепер він очолює команду розробників у Sit the Test, веб-додаток для створення та проведення онлайн-тестів.
Докладніше про Hongkiat:
- Веб-дизайн: рівна висота стовпців з CSS
- 6 хитрощі CSS для вирівнювання вмісту по вертикалі
- Подивіться на одиниці CSS: пікселі, EM та відсоток
- Подивіться на: CSS3 Розміри коробки
Тепер читайте: 10 прихованих властивостей CSS3, які ви повинні знати
