Урок 12. Конфлікти полів

Урок 12. Конфлікти полів

Здрастуй, шановний читачу.

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

Перед вивченням даного уроку пройдіть попередні уроки:

Урок 1. Що таке CSS?
Урок 2. Базові селектори
Урок 3. Групові селектори і селектори нащадків
Урок 4. Псевдоселектори посилань
Урок 5. Шрифти
Урок 6. Оформлення тексту
Урок 7. Рамки
Урок 8. Оформлення списків
Урок 9. Спадкування
Урок 10. Блокова модель
Урок 11. Висота і ширина блоку

Теорія та практика

З даними особливостями CSS вам також доведеться зіткнутися, якщо ви будете мати справу з версткою шаблону для свого сайту.

Перший конфлікт полів

Приступимо. В CSS пропишемо блок і тег

:

123456789101112131415
lt;htmlgt;lt;headgt;lt;titlegt; Головнаlt;/titlegt;lt;meta http-equiv="Content-Type" content="Text / html- charset = utf-8"gt;lt;link rel="Stylesheet" type="Text / css" href="Style.css"gt;lt;/headgt;lt;bodygt;lt;div id="Content1"gt; Текст 1lt;/divgt;lt;div id="Content2"gt; Текст 2lt;/divgt;lt;/bodygt;lt;/htmlgt;

А в CSS приберемо всі відступи, які дають браузери:

123456789
# content1{margin:0-padding:0-}# content2{margin:0-padding:0-}


Зараз поставимо для блоку нижній відступ в 40 пікселів (px):

123456789
# content1{margin:0 0 40px 0-padding:0-}# content2{margin:0-padding:0-}

Як це виглядає в браузері:

Відступ знизу в браузері

Зараз додамо для відступ зверху в 30 пікселів (px):

123456789
# content1{margin:0 0 40px 0-padding:0-}# content2{margin:30px 0 0 0-padding:0-}

Перевіримо зміни в браузері:

Перевірка змін

Як бачите нічого не змінилося, хоча за логікою верхній і нижній відступ повинні були додаватися, але цього не сталося. Це і є перший конфлікт полів. Тобто браузер вибирає більше з значень і його використовує!

Другий конфлікт полів

Для прикладу візьмемо попередній приклад html сторінки і блок помістимо всередину блоку:

1234567891011121314
lt;htmlgt;lt;headgt;lt;titlegt; Головнаlt;/titlegt;lt;meta http-equiv="Content-Type" content="Text / html- charset = utf-8"gt;lt;link rel="Stylesheet" type="Text / css" href="Style.css"gt;lt;/headgt;lt;bodygt;lt;div id="Content1"gt;lt;div id="Content2"gt; Текстlt;/divgt;lt;/divgt;lt;/bodygt;lt;/htmlgt;

Відео: Курс CSS - Урок №20. Конфлікти полів. (Євген Попов)

А в CSS відразу пропишемо:

123456789
# content1{margin:30px 0 0 0-padding:0-}# content2{margin:30px 0 0 0-padding:0-}

Що у нас повинно вийти: задані два верхніх відступу, т. Е. Блок повинен відступати від верху на 30 пікселів (px), в той же час ще і блок повинен відступати всередині блоку на 30 пікселів (px). Перевіримо наш код виглядає в браузері:

Другий конфлікт полів

Як бачите ми не бачимо те, що за логікою повинні були побачити. Це відбувається через другого конфлікт полів. Але цей конфлікт полів має рішення: необхідно поставити кордону для даних блоків:

1234567891011
# content1{margin:30px 0 0 0-padding:0-border:1px solid # cc0000-}# content2{margin:30px 0 0 0-padding:0-border:1px solid #cccccc-}

Як зараз виглядає в браузері:

Відео: Конфлікти полей.Урок 20

Рішення другого конфлікту полів

Даний матеріал зрозумілий не відразу. Але досить того що ви хоча б прочитаєте цю статтю і при необхідності (наприклад при верстці шаблону) повернетеся до неї і тоді буде набагато легше зрозуміти про що тут я хотів сказати. На цьому все.

Більше практикуйтеся!

Поділися в соц мережах:
Cхоже

Увага, тільки СЬОГОДНІ!