Розкладка в CSS потік
У попередній статті я вже кілька разів згадав прямий потік - той порядок, в якому розміщуються бокси, якщо їм не давати якогось спеціального позиціонування. І порядок цей, треба сказати, не такий і простий.
Типи боксів
Бокси, що у потоці, бувають двох принципово різних типів: малі і блокові ( " inline " і " block " в термінології CSS).
Рядкові бокси, як випливає з назви, це те, що розкладається один за одним у рядки і переноситься на наступні рядки, коли не вистачає ширини. До них відноситься звичайний текст, теги, що відповідають за оформлення тексту, такі як,, а також картинки. Рядкові бокси можу також містити інші рядкові бокси. Ось приклад набору малих боксів:
До речі, ті частини, які не обрамлені жодними тегами, об'єднуються в так звані безіменні малі бокси ("anonymous inline box").
Важливою властивістю малих боксів є те, що вони мають свій власний розмір. Він складається із розміру шрифту (для літер), власних розмірів картинок, відстані між рядками. Це означає, що браузер при розкладанні малих боксів визначає їх розмір сам, без зазначення будь-яких width і height.
Ще одна особливість - це те, що для малих боксів не працюють верхні та нижні межі та відступи. Це не так і дивно, якщо врахувати, що через перенесення рядків чітких понять "верх" і "низ" вже немає.
Тут блокові бокси
містять у собі малі бокси з текстом, а самі входять до іншого блоковий бокс, заданий тегом .
Взагалі, технічно, якщо всередині блоку сидять і малі, і блочні бокси впереміш, то всі малі об'єднуються в безіменні блочні бокси ("anonymous block box"). У попередньому прикладі текст дозаголовка саме полягає в такий безіменний блоковий бокс.
Розташування боксів
Потік задає досить жорстку поведінку боксів, тому якось вільно їх розташовувати, загалом, і не можна. Що з ними можна робити - то це вирівнювати по горизонталі.
Найпростіше з цим справи у малих боксів. Їх існує спеціальне властивість - text-align , яке буває left , right і center . Єдине, що треба пам'ятати, воно задається не для самих малих боксів, а для того блоку, в якому вони лежать.
З цього ж випливає, що вирівнювання блочного боксу по горизонталі без вказівки ширини немає сенсу: він і так займає весь простір. А от якщо ширину чітко вказати, і вона буде меншою, ніж ширина батька, то блочний бокс вже може вирівнюватися. Робиться це, як не дивно, за допомогою завдання лівої та правої меж (margin'ів):
Тобто принцип такий: установка бічного кордону в 'auto' відліплює бокс від відповідного краю і приліплює до протилежного, якщо в 'auto' стоять обидві межі - бокс вирівнюється по центру. Якщо ж жодна з бічних кордонів не стоїть в 'auto', то бокс вирівнюється до краю, з якого йде текст у поточній мові (тобто, у нас - зліва, а в арабській - праворуч).
Вертикальне вирівнювання
Якщо вже зайшла мова про вирівнювання, скажу і про вертикальне. Це одна з тих небагатьох речей, з якою CSS зовсім погано. Говорячи по-простому, якогось одного осудного механізму, що ще й працює в більшості браузерів, просто не існує. Існують способи обходити цей недолік, причому немає жодного універсального – все з якимись умовами. Я, мабуть, зупинюся на цьому хворому питанні в окремій статті, а нетерплячим поки що - англійською.
Управління типами боксів
Тип боксів, створюваних елементами HTML, визначається ними самими. Наприклад,
То виділений текст вилізе з рядка і почне займати окреме місце по вертикалі:
Аналогічно можна зробити і навпаки. HTML:
І заголовок з абзацом викладено в одну строку:
Це, зокрема, широко використовується для таких речей, як розкладання головного меню сайту, заданого за допомогою списку (
-
) у вигляді горизонтального рядка.
Таким чином, CSS дозволяє досить вільно поводитися з роллю боксів у потоці. Це якраз один із тих механізмів, який відокремлює оформлення від вмісту: при виборі тегів для опису структури сторінки треба керуватися змістом цих тегів, а не тим, як вони начебто виглядають. Тому що виглядати вони можуть як завгодно.
Коментарі: 41
Іване, маленьке зауваження збоку: тексти цього циклу у Вас відрізняються якоюсь абсолютно звірячою, нелюдською корисністю :) Взагалі, це треба було б студентам розповідати :)
З великим задоволенням читаю цей блог і цей підручник. Систематизований матеріал, це дуже корисно, навіть якщо здебільшого все це вже знаєш на власних набитих шишках. Дякую.
Бракувало інформації коли використовувати span, а коли div. Тепер усе стало на свої місця. Велике дякую!
Страшенно цікаво, захоплююче і зрозуміло написано, але.
Давно для себе хотів усю табличну верстку перевести на блоки, але постійно стикався з тим, що різні браузери все, що не напишеш, інтерпретують по-різному.
І ось читаю я зараз ваші матеріали, милуюсь чистим кодом, ламаю голову над css-файлом і роблю спробу поглянути на цю сторінку "очима" різних броузерів. І що бачу. Схоже,тільки IE показує ваші сторінки так, як задумано. Opera - теж терпимо, але вже губляться оформлювальні елементи. А набираючий популярність (судячи з логів мого сайту) FireFox спотворив все до невпізнання - сторінка представлена. як це на вашу думку. "Прямий потік" - забавно. Крім.нічого не залишилося, а меню в самому несподіваному, напевно, для вас (та й для відвідувачів) місці. Хоча плюс у тому, що вся інформація все ж таки залишилася. у тому вигляді, в якому його показували текстові броузери на зорі інтернет-становлення.
Все так здорово починалося теоретично ваших статей і так плачевно закінчилося практично.
Ми не зможемо змусити програмістів написати такий броузер, щоб він досконало підтримував CSS, та й не зможемо змусити всіх користувачів перейти на них, якщо таке диво раптом станеться. Виходить, що тільки для власного задоволення і варто верстати за допомогою css.Дуже сумно все це.
Дико перепрошую! Перший пост писав, коли дивився в офлайні - була диская жах, а зараз і з Firefox'om все добре. І навіть, як виявилося, видно більше, ніж у IE.
Так, судячи з опису, проблема була якраз у тому, що кудись загубився стиль. Насправді, я зараз періодично доробляю різні частини сайту, тому якщо щось здається дуже дивним, часто достатньо натиснути на Reload, щоб все стало на свої місця.
Тепер насправді. Я б сказав, що зараз ситуація з підтримкою CSS'а браузерами значно визначеніша, ніж за часів IE4 і NN4. Проблеми зазвичай виникають у дизайнерів, які мають навички старої школи верстки. Я, як і обіцяв уже раніше, обов'язково напишу про практичну сторону. І про підтримку в браузерах і поняття "виглядає однаково" і т.д. Але я навмисно хочу це зробити після теорії пророзкладку, щоб було на що посилатися. Отже, потерпіть ще трохи :-). На жаль, у мене не весь час йде лише на ці статті.
Сьогодні отримав один лист від читача, за яким зрозумів, що не зовсім ясно висловився про вирівнювання малих боксів і те, куди застосовується text-align. Роз'яснюю докладніше.
По-перше, я ніде не згадав, що поняття вирівнювання по горизонталі має сенс лише усередині блокових боксів. Тому що блоковий бокс - це коробка певної ширини, всередині якої знаходяться малі бокси, і кожен рядок може бути менше ширини батьківського блоку. І тоді є сенс їх кудись рухати по горизонталі.
А ось у рядкового боксу, загалом, немає ніякої "ширини". Є довжина рядка, яка точно охоплює вміст цього рядка - літери та інші вкладені малі бокси. І вирівнювати цей вміст у ній просто нікуди.
Тому для вирівнювання рядків потрібні два елементи: блочний бокс та малі бокси, які в ньому лежать. І властивість text-align призначається саме батьківському блочному боксу.
Тобто коли ми пишемо:
Це означає "всередині блочного боксу
вирівнювати малі бокси по центру".
Ось. Сподіваюся, не заплутав ще більше
Ні. Все нормально тепер . =) Хоча я в принципі так і розумів завжди вирівнювання це =) Спасибі.
Дуже хочеться побачити виразну статтю про вертикальне вирівнювання =). Сиджу ось експерементую. так і хочеться забити і зробити одну. головну таблицю з вертикальним вирівнюванням. всього-то.
і скільки проблем відразу вирішиться. =)))
Це все чудово .. але у мене таке питання: чи можна скласти такий універсальний HTML файл, щоб до нього можна було "пристосувати" будь-який дизайн підключивши CSS. Тобто. адже не можна залишити голий HTML без доп. оформлювальних тегів.. Ну щось на кшталт: ..