HTML блоки та їх css властивості, Web On Life
Здавалося б, що складного у верстці. HTML та CSS навіть не мови програмування. HTML сторінка - це просто блоки розміщені в потрібному місці. Насправді, все не так просто. Сідати за верстку не розібравшись у нюансах блокової моделі означає вбити багато часу на підганяння результатів методом тику щоразу дивуючись несподіваним результатам або їх відсутності. У сайтобудуванні як і в будівництві, якщо хочете побудувати що-небудь серйозніше за паркан потрібно знати тонкощі.
css властивості для визначення висоти та ширини блоку.
За замовчуванням блок завширшки займає весь доступний йому простір і обмежується шириною батьківського блоку. Висота блоку визначається його вмістом.
Розміри блоку можна змінювати використовуючи властивості height і width. Ці властивості задаються не для всього блоку, а для його вмісту. Це потрібно пам'ятати тому що крім вмісту на розмір блоку впливають ще дві властивості – border та padding. За назвою можна зрозуміти, що border визначає кордон. На малюнку кордон позначений червоною лінією. Простір між кордоном та вмістом визначають за допомогою властивості padding. Якщо його не задати то текст на картинці нижче притиснеться до кордону.
Таким чином обчислюючи розмір блоку крім width та height потрібно враховувати padding та border. Для прикладу порахуємо розмір блоку для якого задані наступні значення
Ширина блоку 200px+10px*2+5px*2=230px
Щоб не забивати голову арифметикою і завжди точно знати розмір блоку, є властивість box-sizing. Приймає три значення.
- content-box - Значення задані у width і height відносяться лише до вмісту.
- padding-box - Значення задані у width та height визначають розмір вмісту плюс розмірвідступу (padding).
- border-box - Значення, задані в width і height, визначають розмір вмісту плюс відступ(padding) плюс кордон(border)
Якщо в приклад вище додати рядок
розмір блоку буде заявлено 200px, а ширина вмісту зменшиться до 200px-10px*2-5px*2=170px.
margin як правильно встановити відстань між блоками.
Говорити про блоки та не згадати про margin буде неправильно тим більше розповісти є що. Для тих, хто не в курсі margin визначає вільний простір навколо блоку. На відміну від padding, тут не все так очевидно. Розглянемо два блоки один вкладений в інший. Задаємо вкладеному блоку margin: 10%. Відразу постає питання від чого відраховувати ці відсотки. Відсотки беруться від ширини батьківського елемента. При цьому неважливо визначаємо горизонтальні або вертикальні відступи. Відповідь, прямо скажемо, не очевидна, але якщо подивитися пояснення стає ясно чому обраний саме такий варіант.
Сюрпризи на цьому не закінчуються. margin доданий до нашого зображення дасть такий несподіваний результат.
Сірим на зображенні позначений батьківський блок. Всупереч нашим очікуванням margin використаний до дочірнього блоку не розсунув зверху та знизу кордону батьківського. Сталося це тому, що у батьківського блоку немає від чого відштовхуватися. У таких випадках margin виноситься на ружу і відштовхується від сусіднього блоку або меж блоку розташованого вище рівнем. Щоб блок відштовхувався від батьківського потрібно, щоб у батьківського блоку були задані padding або border або властивість overflow з будь-яким значенням крім visible.
Ще одна особливість відступів - це схлопування. Сенс у тому що якщо у двох сусідніх елементів заданий margin то відстань між ними дорівнює найбільшому значенню.
margin моженабувати негативних значень. У цьому випадку один блок перекриватиме інший. То наскільки один блок наповзе на інший визначається
- Якщо обидва margin негативні, то береться велике за модулем значення
- Якщо один margin негативний та інший позитивний то вони складаються.
Member for
ср, 12/17/2014 - 20:22
Я колись обов'язково
Я колись обов'язково навчуся верстати сайт з нуля. Багато чого вже розумію, багато ні. Доводиться в усьому розбиратися, бо жодна тема мене не влаштовує. Зараз проблема – як зробити свій сайт гумовим. До речі, читала про всі ці відступи: треба ще вміти задавати параметри так, щоб усі браузери відображали однаково. Теж заковирка ще та.
Member for
ср, 12/17/2014 - 21:15