Css техніки, знання яких не вистачає новачкам
CSS - проста, потужна і легка для використання техніка. Але, не дивлячись на свою простоту, в ній ховається чимало можливостей. Якщо запитати будь-якого дизайнера, то він скаже, що основне джерело проблем з кодом і їх рішень ховається в CSS.
Всі дизайнери в певній точці їх кар'єри проходять через процес виявлення дивних моментів у відображенні інформації, пошуку рішень і відкриття трюків і технік, які можуть зберегти для них втрачені на розлади годинник.
В даному уроці зібрані разом найбільш розчаровують і вимогливі до часу вузькі місця CSS і, що більш важливо, шляхи їх обходу (з прикладами). Можливо, інформація допоможе зберегти кілька ваших волосся від передчасного посивіння.
Скидання і браузерная несумісність
Не всі браузери однакові. Насправді, кожен браузер відрізняється від інших. Які значення стоять за замовчуванням для полів, відступів, розмірів шрифту для елемента
. Ви будете здивовані розміром списку значень. Для обробки різниці між браузерами багато хто починає зі скидання стилів CSS.
На ранніх стадіях використання техніки скидання, дизайнери встановлювали значення тільки для полів і відступів, використовуючи правило глобального скидання:
Але чим більше людей використовували скидання і обговорювали його, тим очевидніше ставав факт, що установка значень тільки для полів і відступів не достатня (і застосування вище наведеного правила для кожного елемента погано позначається на механізмі виведення сторінки). Завдяки роботі Eric Meyer і інших піонерів CSS була створена більш повна колекція правил скидання:
Важливо відзначити, які елементи включені в популярний список скидання CSS. Також важливо знати, що деякі елементи були навмисно виключені із списку:
Дані елементи були виключені через значну різницю в їх крос-браузерному поданні. Легше взагалі не ставити для них ніякого стилю.
Модель прямокутника - поля, відступи і межі
Модель прямокутника є основою для всіх розміток. Вона управляє розмірами і відступами елементів на сторінці. Для того, щоб зрозуміти її потрібно зрозуміти різницю між блоковими елементами і малими елементами.
Блокові елементи за замовчуванням займають всю ширину містить їх елементи і мають висоту line-height. Вони розташовуються один під іншим, верх до низу. З цієї причини вони за умовчанням займають всю містить їх рядок на сторінці Прикладом блокових елементів є:
..
- .
- .
Рядкові елементи. Вони розташовуються один за іншим зліва на право. Коли вони мають контент, то займають місце точно по висоті і ширині контенту. Без контенту вони згортаються і не мають ні ширини, ні висоти. Приклади малих елементів:
. . . . .
Всі блокові елементи HTML мають властивості: height (висота), width (ширина), margin (поле), padding (відступ), і border (межа) (рядкові елементи теж мають такі властивості, але працюють вони по іншому). Width і height - хитрі атрибути, вони вимагають обчислень. Коли дизайнер визначає ширину елемента, він повинен розглядати весь прямокутник в цілому.
У прикладі нижче прямокутник має ширину 260px. Поле, відступ і кордон мають розмір 30px кожен (пам'ятаєте, що 30px на верху, 30 внизу, 30 справа і 30 ліворуч). Таким чином поле займає 60 px ширину прямокутника. Так само як і кордон і відступ займають по 60px кожен. Всі разом поле, відступ і кордон займають 180 px шірірни прямокутника.
Ми знаємо, що загальна ширина прямокутника 260px, але в CSS атрибут width посилається на область контенту всередині прямокутника. Таким чином, для нашого прикладу нам потрібно відняти 180 px (для поля, відступу і кордони) з 260 (загальна ширина прямокутника), що дає нам ширину області контенту рівною 80px. Таким чином наш CSS виглядає ось так:
доповнення
- Всі приклади і правила, які обговорювалися вище для властивості width також актуальні і для властивості height.
- margin може містити від'ємне значення. Використовуйте його обережно.
- пам'ятайте про використання одиниць виміру в моделі прямокутника. Тільки нульові значення (margin: 0;) можуть бути написані без завдання одиниць виміру.
Розміри - висота, ширина, мінімум і максимум
Тепер зрозуміло, як використовувати ширину і висоту в моделі прямокутника. Давайте розглянемо гнучкість розмірів CSS. Нові браузери підтримують min- і max-width (і те ж саме для height), дозволяючи нам креативно використовувати розміри і створювати гнучку розмітку.
Width / height задає простір, яке займає об'єкт. Вони можуть вимірюватися в пікселях (10px), відносних одиницях (10em) і відсотках (10%), а також в інших одиницях виміру. Визначення ширини або висоти елемента примушує його зберігати зазначені розміри незалежно від змісту всередині. Таким чином, якщо контент занадто великий для контейнера, то він буде обрізаний і нижня частина буде прихована (або він буде виглядати справжньою мішаниною).
Min-width і min-height
Min-width і min-height може бути дуже корисним для таких елементів як і
- .