Головна CSS Блочна модель (Box Model) - основа CSS
Блочна модель (Box Model) - основа CSS

Як відомо, будь-який HTML / XHTML-документ складається з елементів (тегів), що утворюють певну ієрархію. Веб-майстер використовує CSS, щоб примусити браузер певним чином оформити і відобразити вміст елементів, перетворивши його в красиво оформлений документ.

Практично будь-який елемент браузер сприймає як прямокутну область, так, як показано у прикладі нижче. Це поведінка браузера має назву Box Model ("блокова" або "коробкова" модель).

Припустимо, ми маємо на вході:

<span>Якийсь контент</span>


У наведеному прикладі бордюри зображені для наочності, за замовчуванням вони мають нульову товщину і не видимі.

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

Прямокутна область, яка містить елемент, складається з чотирьох частин. Це:
• Власне, вміст елементу (контент)
• Бордюр (рамка, англ. "Border")
• Простір між вмістом елементу і бордюром (англ. "padding").
• Зовнішнє простір між бордюром і невидимою границею прямокутника (англ. "margin").

Існує два типи елементів - блокові ("block") і внутрішньотекстові ("inline", можна називати як "вбудовані").

Блокові (block) елементи
Займають до 100% ширини батьківського елементу. При цьому сусіднім елементів доведеться посунутися вниз. Так, наприклад, h1 є блоковим елементом - всякий наступний за ним елемент буде відображений нижче.

Inline-("інлайн" -) елементи
Мають ширину як у свого вмісту. Це означає, що два і більше inline-елементу можуть розташовуватися послідовно на одній лінії. Наприклад, тег a - це inline-елемент. Він може перебувати прямо в тексті, оточений текстом з двох сторін.

Будь-який веб-браузер містить деякий базовий вбудований набір правил, і знає, який XHTML-елемент відноситься до типу "block", а який - до "inline". Згідно з цими правилами браузер малює h1 заголовки шрифтом, вдвічі перевищує розмір звичайного шрифту, а гіперпосилання за замовчуванням відображаються синіми з підкресленням.

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

 

 

Коментарі  

 
0 #11 casliapabuds1976 28.03.2016 01:55
Следуя закону бутерброда, можно сделать вывод, что если бутерброд намазать с двух сторон, то он повиснет в воздухе. Сколько Вашему сорванцу? Шестнадцать? Да, аборт делать уже поздно… Если враг не сдается, его перезагружают! Не кидайте бычки в писсуары, мы же не ссым в ваши пепельницы КЛАВУ топтать – это вам не с ДЖОЙСТИКОМ баловаться … Шоб вы так жили, как прибедняетесь! Жизнь так коротка! Потерпи чуть-чуть! Дул такой сильный ветер, что сигареты выворачивало вместе с зубами… Хотел бы проконсультиров аться по поводу моего сайта http://jet-s.ru/vimeo
Цитувати
 
 
0 #10 cuycotsculbu1979 28.03.2016 01:30
Как нельзя кстати. Вот на этом сайте разместил статью на вас http://jet-s.ru/promodj
Цитувати
 
 
0 #9 notiliswimb1988 25.03.2016 16:09
В этом что-то есть. Спасибо за объяснение. Я не знал этого. Ресурс http://go-ip.ru/nakrutka-jandeks-vebvizor.html
Цитувати
 
 
0 #8 xiabloodlieche1973 25.03.2016 10:12
Ваша фраза бесподобна... :) Вот мой проект http://go-ip.ru
Цитувати
 
 
0 #7 inderkeise1988 25.03.2016 05:09
Информация подобрана очень успешно, когда будет обновление? Много интересной информации http://go-ip.ru/gde-vzjat-deshevyj-trafik.html
Цитувати
 
 
0 #6 ecbuipuggti1972 24.03.2016 18:20
По моему мнению Вы не правы. Я уверен. Могу это доказать. Пишите мне в PM, обсудим. Пожалуйста оцените проект http://calls-online.ru/
Цитувати
 
 
0 #5 reilensoftpon1986 24.03.2016 18:08
Я извиняюсь, но, по-моему, Вы ошибаетесь. Могу отстоять свою позицию. Пишите мне в PM, поговорим. Процитировал вас на моем сайте http://calls-online.ru/forms/oplata.php
Цитувати
 
 
0 #4 wealthpasbadach1972 24.03.2016 14:25
vя тоже так хочу научиться Рад был показать свой сайт http://calls-online.ru/forms/oplata.php
Цитувати
 
 
0 #3 snowacborci1979 20.03.2016 06:29
Я считаю, что Вы допускаете ошибку. Пишите мне в PM, поговорим. Мне понравилось, нашел здесь похожую статью http://poll-up.ru
Цитувати
 
 
0 #2 halenpimu1974 18.03.2016 19:48
Я считаю, что Вы допускаете ошибку. Предлагаю это обсудить. Информацию взял к себе http://poll-up.ru
Цитувати
 

Додати коментар


Захисний код
Оновити

© 2008-2013 PHPist