Какво е DIV

Името на елемента идва от английската дума division, което означава деление. Когато пишете маркиране, той се използва за разделяне на елементи на блокове. DIV обхваща групи от съдържание на уеб страница. Например изображения, параграфи с текст. Тагът не влияе по никакъв начин на показването на съдържание и не носи никакво семантично натоварване.

DIV поддържа всички глобални атрибути. Но за уеб дизайн ви трябват само две - клас и идентификатор. За всичко останало ще си спомните само в екзотични случаи, а това не е факт. Атрибутът align, който се използваше за центриране или ляво подравняване на div, е отхвърлен.

Кога да използвате DIVs

Представете си, че сайтът е хладилник, а DIV са пластмасови контейнери, по които трябва да сортирате съдържанието. Няма да слагате плодове в един и същи съд с черен дроб. Всеки вид продукт поставяте отделно. Уеб съдържанието се генерира по подобен начин.

Отворете всеки сайт и го разделете на семантични блокове. Горен колонтитул отгоре, долен колонтитул отдолу, основен текст в центъра. Отстрани обикновено има по-малка колона с промоционално съдържание или облак от етикети.

Сега разглобете всеки раздел по-подробно. Започнете със заглавката. Заглавката на сайта има отделно лого, навигация, заглавие от първо ниво и понякога слоган. Задайте свой собствен контейнер към всеки семантичен блок. Това не само ще раздели елементите в потока, но и ще улесни форматирането им. Ще бъде много по-лесно за вас да центрирате обекта в тага DIV, като му дадете клас или ID.

Центрирайте DIV с полета

Когато изобразява уеб елементи, браузърът взема предвид три свойства: подложка, поле и рамка. padding е пространството между съдържанието и неговата граница. Маржин - полета, разделящи един обект от друг. Границите са линии по протежение на блоковете. Те могат да бъдат присвоени наведнъж от всички или само от едната страна:

Тези свойства добавят свободно пространство между обектите и също така им помагат да се подравнят и поставят по желание. Например, ако блок с картина трябва да бъде изместен от левия край към центъра с 20%, вие присвоявате margin-left на елемента със стойност 20%:

Block-with-img( margin-left: 20%; )

Елементите могат също да бъдат форматирани, като се използват техните стойности на ширина и отрицателна подложка. Например, има блок с размери 200px на 200px. Първо, задайте му абсолютна позиция и го преместете в центъра с 50%.

Div (позиция: абсолютна; ляво: 50%; )

Сега, за да сте сигурни, че DIV е идеално центриран, дайте му отрицателна лява подложка, равна на 50% от ширината му, т.е. -100 пиксела:

ляво поле: -100px

В CSS това се нарича "премахване на въздух". Но има значителен недостатък в необходимостта от извършване на постоянни изчисления, което е доста трудно да се направи за елементи с няколко нива на влагане. Ако са зададени padding и border-width, браузърът по подразбиране ще изчисли размерите на контейнера като сбор от дебелината на границата, подложката отдясно, отляво и самото съдържание, което също може да бъде изненада.

Така че, когато трябва да центрирате DIV, използвайте свойството box-sizing със стойност border-box. Това ще попречи на браузъра да добави стойността на подложката и рамката към общата ширина на елемента DIV. За да повдигнете или намалите елемент, използвайте и отрицателни стойности. Но в този случай те могат да бъдат присвоени или към горното, или към долното поле на контейнера.

Как да центрирате блок div с помощта на автоматични полета

Това е лесен начин за центриране на големи блокове. Просто задавате ширината на контейнера и свойството margin на auto. Браузърът ще постави блока в средата с еднакви полета отляво и отдясно, вършейки цялата работа сам. В резултат на това не рискувате да се объркате в математическите изчисления и значително спестявате време.

Използвайте метода за автоматично маржиране, когато разработвате адаптивни приложения. Ключът е да дадете на контейнера стойност за ширина в em или проценти. Кодът от примера по-горе ще центрира DIV на всяко устройство, включително Мобилни телефони, ще заема 90% от екрана.

Подравняване чрез дисплея на свойствата: inline-block

По подразбиране DIV елементите се считат за блокови елементи и имат показана стойност на блок. За този метод ще трябва да замените това свойство. Подходящо само за DIV с родителски контейнер:

Присвоен е елемент с клас outer-div свойство за подравняване на текстсъс стойност center, която ще центрира текста вътре. Но засега браузърът вижда вложения DIV като блоков обект. За да работи свойството text-align, inner-div трябва да се третира като inline. Следователно, в CSS таблицаза селектора inner-div пишете следния код:

Inner-div( display: inline-block; )

Променяте свойството за показване от block на inline-block.

метод за преобразуване/превод

Каскадните стилови таблици ви позволяват да местите, изкривявате, завъртате и трансформирате уеб елементи по желание. За това се използва свойството transform. Желаният тип трансформация и степента са посочени като стойности. В този пример ще работим с превод:

Функцията за превод премества елемент от текущата му позиция наляво/надясно и нагоре/надолу. Две стойности се предават в скоби:

• степен на хоризонтално движение;
• степен на вертикално движение.

Ако елементът трябва да се премести само по една от координатните оси, тогава след думата за превод посочвате името на оста и в скоби количеството на необходимото изместване:

Трансформация: translateY(-20%);

В някои ръководства можете да видите трансформация с префикси на доставчика:

преобразуване на webkit: превод (50%, 50%); -ms-трансформация: превод (50%, 50%); трансформиране: превод (50%, 50%);

През 2018 г. това вече не е необходимо, свойството се поддържа от всички браузъри, включително Edge и IE.

За да центрираме DIV, от който се нуждаем, CSS функцията translate е написана със стойност 50% за вертикалната и хоризонталната ос. Това ще накара браузъра да премести елемента от текущата му позиция до половината от неговата ширина и височина. Свойствата за ширина и височина трябва да бъдат посочени:

Имайте предвид, че елементът, към който е приложено свойството transform, се движи независимо от обектите около него. От една страна, това е удобно, но понякога се движи, DIV може да припокрие друг контейнер. Следователно този метод за центриране на уеб компоненти се счита за нестандартен и се използва само в спешни случаи. За анимация се използват трансформации по всички CSS канони.

Работа с Flexbox оформление

Flexbox се разглежда по сложен начиноформления на уеб оформление. Но ако го овладеете, ще разберете, че е много по-лесно и приятно от стандартни начиниформатиране. Спецификацията Flexbox е гъвкав и невероятно мощен начин за обработка на елементи. ОТ на английски езикИмето на модула се превежда като "гъвкав контейнер". Стойностите на ширината, височината, разположението на елементите се настройват автоматично, без да се изчисляват отстъпи и полета.

В предишните примери вече работихме със свойството display, но го настроихме да блокира (block) и вградени (inline-block) стойности. За да създадем гъвкави оформления, ще използваме display: flex. Първо имаме нужда от гъвкав контейнер:

За да го преобразуваме във гъвкав контейнер в каскадни таблици, пишем:

Гъвкав контейнер (дисплей: гъвкав; )

Всички обекти, вложени в него, но само преки деца, ще бъдат гъвкави елементи:

Ако списъкът е поставен във гъвкав контейнер, тогава елементите в списъка li не се считат за гъвкави елементи. Flexbox оформлението ще работи само на ul:

Правила за поставяне на гъвкави елементи

За да управлявате flex елементи, имате нужда от justify-content и align-items. В зависимост от зададените от вас стойности, тези две свойства автоматично позиционират обектите според нуждите. Ако трябва да центрираме всички вложени DIV, пишем justify-content: center, align-items: center и нищо друго. Браузърът ще свърши останалата работа:

За да центрирате текст върху DIV, които са гъвкави елементи, можете да използвате стандартния трик за подравняване на текст. Или можете също да направите всеки вложен DIV гъвкав контейнер и да управлявате съдържанието с justify-content. Този метод е много по-рационален, ако съдържа разнообразно съдържание, включително графики, други вложени обекти, включително многостепенни списъци.

Всеки дизайнер на оформление постоянно се сблъсква с необходимостта да подреди съдържанието в блок: хоризонтално или вертикално. Има няколко добри статии по този въпрос, но всички те предлагат много интересни, но малко практични опции, поради което трябва да губите допълнително време, за да подчертаете основното. Реших да подам тази информация в удобния за мен вид, за да не търся повече в гугъл.

Подравняване на блокове с известни размери

Най-лесният начин да използвате CSS е да подравните кутии, които имат предварително определена височина (за вертикално подравняване) или ширина (за хоризонтално подравняване).

Подравняване с подложка

Понякога можете да не центрирате елемент, но да добавите граници към него със свойството " подплата".

Например, има картина 200 на 200 пиксела и искате да я центрирате в блок от 240 на 300. Можем да зададем височината и ширината външно тяло= 200px и добавете 20 пиксела за горната и долната част и 50 за лявото и дясното.

Подравняване на абсолютно позиционирани блокове

Ако блокът е настроен на " позиция: абсолютна", тогава той може да бъде позициониран спрямо най-близкия родител с "position: relative". За това всички свойства (" Горна част","точно","отдолу","наляво") на вътрешния блок, за да присвоите същата стойност, както и "margin: auto".

*Има един нюанс: Ширината (височината) на вътрешния блок + стойността на ляво (дясно, долу, горе) не трябва да надвишава размера на родителския блок. По-безопасно е да зададете свойствата отляво (отдясно, отдолу, отгоре) на 0 (нула).

Хоризонтално подравняване

Подравняване с "text-align: center"

За подравняване на текст в блок има специално свойство " подравняване на текст". Когато е зададено на " център" всеки ред текст ще се подравни хоризонтално. За многоредов тексттова решение се използва изключително рядко, по-често тази опция може да се намери за подравняване на участъци, връзки или снимки.

Веднъж трябваше да измисля текст, за да покажа как работи подравняването на текст, когато CSS помощно нищо интересно не ми хрумна. Първоначално реших да копирам някъде детска песен, но се сетих, че това може да развали уникалността на статията и нашите скъпи читатели няма да могат да я намерят в Google. И тогава реших да напиша този абзац тук - все пак смисълът не е в него, а в подравняването.

Струва си да се отбележи, че това свойство ще работи не само за текст, но и за всички вградени елементи („display: inline“).

Но този текст е подравнен вляво, но е в блок, който е центриран спрямо обвивката.

Подравняване на блокове с полета

Елементите на ниво блок с известна ширина лесно се подравняват хоризонтално, като ги зададете на "маржин-ляво: автоматично; маржин-дясно: автоматично". Обикновено се използва съкращението: " марж: 0 авто" (вместо нула може да има произволна стойност). Но за вертикално подравняване този метод няма да работи.

Ето как си струва да подравните всички блокове, където е възможно (където не е необходимо фиксирано или абсолютно позициониране) - това е най-логичното и адекватно. Въпреки че това изглежда очевидно, понякога съм виждал плашещи примери с отрицателни отстъпи, така че реших да изясня.

Вертикално подравняване

Има много повече проблеми с вертикалното подравняване - очевидно това не е предвидено в CSS. Има няколко начина да постигнете желания резултат, но всички те не са много красиви.

Подравняване със свойството line-height

В случай, че има само един ред в блока, можете да постигнете вертикалното му подравняване, като приложите " височина на линията" и да го зададете на желаната височина. За по-сигурно трябва да зададете и "height", чиято стойност ще бъде равна на стойността на "line-height", тъй като последното не се поддържа във всички браузъри.

Също така е възможно да подравните блок с множество редове. За да направите това, ще трябва да използвате допълнителен обвиващ блок и да му зададете височината на линията. Вътрешният блок може да бъде многоредов, но трябва да е "inline". Трябва да приложите "vertical-align: middle" към него.

Обвиващият блок трябва да има зададен "font-size: 0". Ако не зададете размера на шрифта на нула, тогава браузърът ще добави няколко допълнителни пиксела от себе си. Ще трябва също да посочите размера на шрифта и височината на реда за вътрешния блок, тъй като тези свойства са наследени от родителя.

Вертикално подравняване в таблици

Имот " вертикално подравняване" също засяга клетките на таблицата. Със стойността, зададена на "middle", съдържанието вътре в клетката е центрирано. Разбира се, табличното оформление се счита за архаично в днешно време, но в изключителни случаи може да бъде симулирано чрез указване на " дисплей: клетка-таблица".

Обикновено използвам тази опция за вертикално подравняване. По-долу е даден пример за оформление, взет от готов проект. Картината, която е центрирана вертикално по този начин, представлява интерес.

Трябва да се помни, че ако елементът има набор "float", различен от "none", тогава той така или иначе ще бъде с форма на блок (display: block) - тогава ще трябва да използвате допълнителна обвивка на блок.

Подравняване с допълнителен вграден елемент

А за вградени елементи можете да приложите " вертикално подравняване: по средата". В този случай всички елементи с " дисплей: вграден", които са на една и съща линия, ще се изравнят с обща централна линия.

Трябва да създадете спомагателен блок с височина, равна на височината на родителския блок, след което желаният блок ще бъде центриран. За това е удобно да използвате псевдоелементи:before или:after.

Дисплей: гъвкавост и подравняване

Ако не ви пука много за потребителите на Explorer 8 или ви пука толкова много, че сте готови да поставите част от допълнителен javascript за тях, тогава може да се използва "display: flex". Кутиите Flex се справят с проблемите с подравняването наистина добре и е достатъчно да напишете „margin: auto“, за да центрирате съдържанието вътре.

Досега този метод практически никога не ме е срещал, но няма специални ограничения за него.

Е, това е всичко, за което исках да пиша CSS подравняване. Сега центрирането на съдържанието няма да е проблем!

Често на практика е необходимо да се реши проблемът с групирането и подравняването на съдържанието използвайки CSS. Днес ще разгледаме основните начини за подреждане на елементи в хоризонтален ред.

Материалът на тази статия има за цел да помогне на начинаещите уеб дизайнери да овладеят техниките за оформление на уеб страници.

Какво да изберете или методи

Има няколко начина за подреждане на структурни елементи в ред в хоризонтална равнина. най-полезен от гледна точка на практическо приложение, са:

• Метод "Float".
• Метод "Inline block".
• метод таблица-клетка

Всеки от тях има своите предимства, приложения и недостатъци. Нека ги разгледаме по ред.

"За шут" или малко теория

Всички структурни HTML елементиможе условно да се раздели на:

В редица(вграден) - вид img, spanи подобни. Ние нямаме възможност да променяме техния фон и да им даваме произволни линейни размери.

Блокирайте– заемащи цялата ширина на родителския блок, винаги започвайте с нова линия – p, h, div.

Илюстративен пример за вградени и блокови структури е показан по-долу:

Метод на плаване

Както вече е известно (вижте по-горе), блоковият елемент се поставя на нов ред, независимо от посочената за него ширина ( ширина). Следователно, намаляване на хоризонталния размер див-a, не можете да изграждате блокове в един ред.

Най-популярният (особено сред начинаещите дизайнери на оформление) метод за решение е използването на собствеността плавам.

CSS свойство плавампридоби голяма популярност и практическа стойност след прехода от таблично оформление към блоково оформление.

Плаване: ляво (дясно)трансформира елемент на ниво блок в float, подравнява го към левия (десния) край на родителския блок и задава дясното (ляво) обвиване за текст и други елементи.

Например, нека създадем четири блока, които трябва да бъдат поставени в един ред:

< html> < head> < meta charset= "utf-8" > < link rel= "stylesheet" media= "all" type= "text/css" href= "style.css" /> < body> < div class = "bblock" >Ние строим < div class = "bblock" >хоризонтална < div class = "bblock" >ред < div class = "bblock" >от диви

И външен стилов лист със следното съдържание:

div(float:left; /*Задайте опаковане*/височина на реда: 120px; размер на шрифта: 40px; фон: dogerblue; цвят:бял; margintop: 60px; ширина: 320px /*Коригирайте ширината на блока*/ }

В резултат на това получаваме четири блока, подредени в хоризонтален ред и подравнени към левия край на родителския блок:

Понякога на практика е необходимо блоковете да се подравнят към десния край на родителския елемент. Нека променим обвиването около блоковете в предишния пример:

float:right;

Обърнете внимание на надписите, разположени в блоковете. На пръв поглед може да изглежда, че примерът работи криво. Но всъщност браузърът обработи кода правилно: прочете блоковете отгоре надолу и направи това, което поискахме от него - подравнено вдясно. Имайте това предвид, когато използвате имота float:right.

За да спрете потока от елементи от определено място, използвайте реда:

< div style= "clear: both;" >

В горния пример задаваме разстоянието между блоковете с помощта на отстъпа margin-right. Но какво ще стане, ако имате задача, когато оформяте страницата: поставете блоковете в ред, центрирайте ги и дори така, че отстъпите да са само между тях, но не и отвън?

Алгоритъмът на действията е следният.

< div class = "wrap" > < div class = "bblock" >Ние строим < div class = "bblock" >хоризонтална < div class = "bblock" >ред < div class = "bblock" >от диви

обвиване (ширина: 1310px; /*фиксирайте ширината на обвивката*/марж: 0 авто; /*центрирайте го*/ фон: тъмносив; височина: 120px; /*Задайте височината на обвивката*/) . bblock (float: ляво; /*Задайте опаковане*/височина на реда: 120px; /*Височина на ред + верт. центриране на текст*/размер на шрифта: 40px; фон: dogerblue; цвят:бял; ширина: 320px /*Коригирайте ширината на блока*/ margin-right: 10px; подравняване на текст: център; /*Центрирайте текста хоризонтално*/) . обвиване: последно дете ( margin-right: 0px; /*Премахване на полето на последния div*/ }

В резултат на това получаваме следната картина:

Е, не можете да разгледате всички практически ситуации, така че нека преминем към общи характеристики.

важно!!!

Метод на вграден блок

Както вградените, така и блоковите елементи имат своите предимства и недостатъци в контекста на всяка конкретна задача, която се решава. Но какво ще стане, ако съчетаем техните предимства?

Запознайте се с акцента в програмата – имот дисплей: inline-block.

дисплей: inline-blockгенерира вграден в блок елемент, който по същество е вграден, но запазва свойствата на блока - позволява ви да променяте линейните размери, да задавате полета, отстъпи и т.н.

Вграденият блоков елемент има следните свойства:

• височината и ширината на блока се определят автоматично от съдържанието и стойността на подплата ( подплата)
• Височината и ширината на блока могат да бъдат фиксирани
• Няма ефект на свиване на границата.

Помислете за пример за създаване на проста навигационно меню A, съдържащ изображение и връзка.

< div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Връзката към меню 1 е по-дълга от обикновено < div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Връзка към менюто 2 < div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Връзка към менюто 3 < div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Връзка към менюто 4

Nav (дисплей: inline-block; /*Задаване на блок-редов дисплей*/ширина: 180px /*задаване на ширина на блока*/фон: dogerblue; ) . низ (подравняване на текст: център; /*Подравнете текста хоризонтално*/ }

В резултат на това получаваме следното меню:

Както можете да видите, се оказа криво ... Но ние не възнамеряваме да се разстройваме, затова прилагаме свойството CSS към нашите divs вертикално подравняване(вижте по-долу за подробности):

вертикално подравняване: отгоре;

Нашата навигационна лента вече е подравнена към горния ред:

Разбира се, дадения пример е примитивен, но съм сигурен, че въз основа на него можете да създадете истински шедьовър!!!

важно!!!

• За древните версии на Firefoxдобавете ред:
  

  дисплей: -moz-inline-stack;

  
  и увийте елемента в допълнителна обвивка на div.
• IE 7 и по-стари - добавете редове:
  

  увеличение: 1 /*set hasLayout*/ * дисплей: inline; /*звездичка - хак за IE */ _височина: 250px; /*min-height не работи в IE6*/

• Отбелязвам, че определени браузъри реагират избирателно на тези редове (Firefox на първия, IE на останалите).

Метод на таблицата

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

Имоти дисплей: таблица (клетка на таблицата, вградена таблица), ви позволяват да извършвате таблично форматиране на елементи без HTML приложениямаси.

За хоризонтално разполагане на блокове се нуждаем от родителски елемент, който има свойството дисплей: таблицаи дъщерни елементи (клетки), които имат свойството дисплей: клетка-таблица:

< div class = "wrap" > < div class = "bblock" >Ние строим < div class = "bblock" >табличен < div class = "bblock" >ред < div class = "bblock" >от диви

Bblock (дисплей: клетка от таблица; размер на шрифта: 32px; ширина: 200px; височина: 200px; фон: златен; подравняване на текст: център; вертикално подравняване: средата; ) . обвиване (дисплей: таблица; разстояние между границите: 20px 20px; цвят на фона: тъмносив; )

важно!!!

1. За разлика от методите "inline-block" и "float", когато ширината на прозореца на уеб браузъра е намалена, клетките не се движат надолу.
2. Нямате възможност да зададете свойството margin за клетки на псевдотаблица.
3. Крос браузър. Свойствата от дисплея: семейство таблица* не се поддържат от IE6, IE7. Освен това в IE8 може да видите грешка при динамично изобразяване за елементи на псевдотаблица като произволно изчезващи клетки. Тази грешканай-често се проявява при първоначалното изготвяне на документа

Добър ден, абонати и читатели на тази публикация. Днес искам да навляза в подробности и да ви кажа как да центрирате текст в css. В някои предишни статии косвено засегнах тази тема, така че имате известни познания в тази област.

В тази публикация обаче ще ви разкажа за всякакви начиниподравняване на обекти и обяснете как да направите отстъп и червена линия на абзаци. Така че нека започнем да учим!

Html и неговите потомци и подравнете

Този метод почти никога не се използва, тъй като беше изместен от инструментите за каскадни листове със стилове. Но да знаете, че такъв етикет съществува, няма да ви навреди.

Що се отнася до валидирането този срокописано подробно в статията ""), тогава самата html спецификация осъжда използването < център>, тъй като за валидност е необходимо да се използва транзитив DOCTYPE>.