Преминете към основното съдържание

Стилове за позициониране

Позиционирането ви позволява да извадите елементи от нормалния поток на документа и да ги накарате да се държат по различен начин, например да се разполагат един върху друг или винаги да остават на едно и също място. [1]

CSS box model​

CSS модулът box model (кутиен модел) определя свойствата margin и padding, които заедно със свойствата height, width и border съставляват CSS box model.

Всеки видим елемент в една уебстраница е кутия, разположена според модела за визуално форматиране. CSS свойствата определят техния размер, позиция и ниво на подреждане, като свойствата на box model (и други) определят външния размер на всяка кутия и пространството около тях.

Всяка кутия има правоъгълна област за съдържание, вътре в която се показва текст, изображения и друго съдържание. Съдържанието може да бъде заобиколено от padding, border и margin от едната или повече страни.

  • Padding е около съдържанието.
  • Border е около padding-а.
  • Margin е извън границата.

Box model описва как тези характеристики - съдържанието, padding, border и margin - работят заедно, за да създадат кутия. [2]

box model

Content area​

Content area (областта на съдържанието), съдържа реалното съдържание на елемента като текст, изображение, видеоплейър и др. Размерите ѝ са ширината на съдържанието (или ширината на полето за съдържание) и височината на съдържанието (или височината на полето за съдържание). Често има цвят на фона или фоново изображение.

Ако свойството box-sizing е зададено на content-box (по подразбиране) и ако елементът е блоков елемент, размерът на областта на съдържанието може да бъде изрично дефиниран със свойствата width, min-width, max-width, height, min-height и max-height.

Padding area​

Padding area разширява областта на съдържанието, за да включи padding-a на елемента. Неговите размери са ширината на padding кутията и височината на padding кутията.

Дебелината на padding-a се определя от свойствата padding-top, padding-right, padding-bottom, padding-left и [padding], който е съкратеният запис за изписване на свойствата.

Border area​

Border area (граничната област) разширява padding областта, за да включи border-a на елемента. Нейните размери са ширината на border-box и височината на border-box.

Дебелината на границите се определя от свойствата border-width и съкратеното border.

Ако свойството box-sizing е зададено на border-box, размерът на граничната област може да бъде изрично дефиниран със свойствата width, min-width, max-width, height, min-height и max-height. Когато на кутията е зададен фон (background-color или background-image), той се простира до външния ръб на границата. Това поведение по подразбиране може да се промени с CSS свойството background-clip.

Margin area​

Margin area разширява border областта, за да включи празна област, използвана за отделяне на елемента от неговите съседи. Нейните размери са ширината на margin box и височината на margin box.

Размерът на margin областта се определя от свойствата margin-top, margin-right, margin-bottom, margin-left и съкратеното обозначение на margin. Когато се случи свиване margin, областта на margin-a не е ясно дефинирана, тъй като margin-a се споделя между кутиите.

При inline elements (вградени елементи), количеството заето пространство (приносът към височината на реда) се определя от свойството line-height, въпреки че border и paddings все още се показват около съдържанието.

Показване на елементи (display)​

CSS свойството display определя дали даден елемент се третира като block (блок) или inline (вграден), както и оформлението, използвано за неговите деца, като например flow, grid или flex. [3]

Свойството display задава вътрешния и външния начин на показване на елемента. Външният тип задава участието на елемента във [flow оформлението]](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Display/Flow_layout); вътрешният тип задава оформлението на децата. Някои стойности на display са напълно дефинирани в техните собствени индивидуални спецификации.

display: inline​

Стойността по подразбиране за елементите. Помислете за елементи като <span>, <em> или <b> и как обгръщането на текст в тези елементи не нарушава потока на текста. [4]

Code


<style>
em {
      display: inline;
      border: 1px solid red;
}
</style>

<p>Lorem ipsum dolor sit amet, <em>inline element</em> adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>

Preview

Елементът <em> има червена рамка от 1px. Обърнете внимание, че е разположен точно на една линия с останалия текст.

Inline елементите приемат margin и padding, но те остават разположени на една линия. Margin и padding ще изместят другите елементи само хоризонтално, а не вертикално.

Code


<style>
em {
      display: inline;
      border: 1px solid red;
      background-color: red;
      margin: 20px;
      padding: 20px;
}
</style>

<p>Lorem ipsum dolor sit amet, <em>inline element</em> adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>

Preview

Вграденият елемент няма да приема височина и ширина. Той просто ще ги игнорира.

display: inline-block​

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

Code


<style>
em {
      display: inline-block;
      border: 1px solid red;
      background-color: red;
      margin: 20px;
      padding: 20px;
      height: 20px;
}
</style>

<p>Lorem ipsum dolor sit amet, <em>inline element</em> adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>

Preview

display: block​

Редица елементи за зададени да бъдат block (блокови). Те обикновено са контейнерни елементи, като <div>, <section> и <ul>. Също така текстови блокове като <p> и <h1>. Блоковите елементи пречупват съдържанието около себе си. По подразбиране (без задаване на ширина) те заемат колкото е възможно повече хоризонтално пространство.

Code


<style>
p {
      display: block;
      border: 1px solid red;
}
</style>

<p>Lorem ipsum dolor sit amet, adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>

<em>inline element</em>

<p>Lorem ipsum dolor sit amet, adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>

Preview

Елементите <p> са блокови елементи. Елементът <em> е вграден, но двата <p> го принуждават да заеме цял ред.

Flexbox​

Модулът Flexbox Layout (Flexible Box) предоставя по-ефективен начин за оформление, подравняване и разпределение на пространството между елементите в контейнер, дори когато размерът им е неизвестен и/или динамичен (оттук и думата „flex“).

Основната идея зад flex оформлението е да се даде възможност на контейнера да променя ширината/височината (и реда) на елементите си, за да запълни най-добре наличното пространство (най-вече за да се приспособи към всички видове размери на екраните). Flex контейнерът разширява елементите, за да запълни наличното свободно пространство, или ги свива, за да предотврати препълване.

Най-важното е, че flexbox оформлението е независимо от посоката, за разлика от обикновените оформления (блоково, което е вертикално базирано, и вградено, което е хоризонтално базирано). Въпреки че те работят добре за страници, им липсва гъвкавост, за да поддържат големи или сложни приложения (особено когато става въпрос за промяна на ориентацията, преоразмеряване, разтягане, свиване и т.н.). [5]

Flexbox Терминология​

Тъй като flexbox е цял модул, а не отделно свойство, той включва много неща, включително целия си набор от свойства. Някои от тях са предназначени да бъдат зададени на контейнера (родителски елемент, известен като „flex контейнер“), докато други са предназначени да бъдат зададени на децата (наричани „flex елементи“).

Ако обикновеното оформление е базирано както на блокови, така и на вградени посоки на потока, flex оформлението е базирано на flex-flow посоки.

flex box terminology

Елементите ще бъдат разположени или по main axis (главната ос) от основното начало до основното крайно положение, или по cross axis (напречната ос) от напречното начало до напречното крайно положение.

Flexbox Properties​

Properties за родителя (Flex Container)​

flexbox container

display​

Това дефинира flex контейнер; вграден или блоков в зависимост от дадената стойност. Той позволява flex контекст за всички негови директни деца.

.container {
        display: flex; /* or inline-flex */
}

flex-direction​

flex-direction

Това установява main axis, като по този начин определя посоката, в която flex елементи се поставят във flex контейнер. Flexbox е концепция за оформление в една посока. Мислете за flex елементите като за разположени предимно в хоризонтални редове или вертикални колони.

.container {
        flex-direction: row | row-reverse | column | column-reverse;
}

flex-wrap​

flex-wrap

По подразбиране, flex елементите ще се опитат да се поберат на един ред. Можете да промените това и да позволите на елементите да преминават на нов ред, когато е необходимо, с това свойство.

.container {
        flex-wrap: nowrap | wrap | wrap-reverse;
}

flex-flow​

Това е съкратен запис за свойствата flex-direction и flex-wrap, които заедно определят main и cross axis на flex контейнера. Стойността по подразбиране е row nowrap.

.container {
        flex-flow: column wrap;
}

justify-content​

justify-content

Това определя подравняването по main axis. Помага за разпределянето на допълнителното свободно пространство, когато всички flex елементи на даден ред са inflexible или са flexible, но са достигнали максималния си размер. Също така упражнява известен контрол върху подравняването на елементите, когато те преливат реда.

.container {
        justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}
Информация

Има и две допълнителни ключови думи, които можете да използвате с тези стойности: safe и unsafe. Използването на safe гарантира, че независимо от това как се позиционира този тип, не можете да преместите елемент така, че той да се изобрази извън екрана по начин, по който съдържанието не може да се скролва (нарича се загуба на данни).

align-items​

align-items

Това определя поведението по подразбиране за това как flex елементи се разполагат по cross axis на текущия ред. Мислете за това като за justify-content подравняване на съдържанието, но за cross axis (перпендикулярно на main axis).

.container {
        align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}
Информация

Ключовите думи safe и unsafe могат да се използват заедно с всички останали ключови думи.

align-content​

align-content

Това подравнява линиите на flex контейнер, когато има допълнително пространство по cross axis, подобно на начина, по който justify-content подравнява отделни елементи в рамките на main axis.

Внимание

Това свойство е ефективно само за многоредови flex контейнери, където flex-wrap е зададено на wrap или wrap-reverse. Едноредов flex контейнер няма да отразява align-content.

.container {
        align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}
Информация

Ключовите думи safe и unsafe могат да се използват заедно с всички останали ключови думи.

gap, row-gap, column-gap​

gap

Свойството gap контролира разстоянието между flex елементи. То прилага това разстояние само между елементи, които не са по външните ръбове, тоест вътрешните елементи.

.container {
        display: flex;
        ...
        gap: 10px;
        gap: 10px 20px; /* row-gap column gap */
        row-gap: 10px;
        column-gap: 20px;
}

Properties за децата (Flex Items)​

order​

order

По подразбиране, flex елементите са подредени в реда, в който са създадени. Свойството order обаче контролира реда, в който се появяват във flex контейнера.

.item {
        order: 5; /* default is 0 */
}

Елементите с еднакъв order се връщат към първоначалния ред.

flex-grow​

flex-grow

Това определя способността на flex елемент да расте, ако е необходимо. Приема безмерна стойност, която служи като пропорция. Диктува какво количество от наличното пространство във flex контейнер трябва да заема елементът.

Ако всички елементи имат flex-grow, зададен на 1, останалото пространство в контейнера ще бъде разпределено поравно между всички деца. Ако едно от децата има стойност 2, това дете ще заема два пъти повече място от всяко от останалите (или поне ще се опита).

.item {
        flex-grow: 4; /* default 0 */
}
Внимание

Отрицателните числа са невалидни стойности

flex-shrink​

Това определя способността на flex елемент да се свива, ако е необходимо.

.item {
         flex-shrink: 3; /* default 1 */
}
Внимание

Отрицателните числа са невалидни стойности

flex-basis​

Това определя размера по подразбиране на елемент, преди да се разпредели останалото пространство. Той може да бъде дължина (напр. 20%, 5rem и т.н.) или ключова дума. Ключовата дума auto означава (виж моето свойство width или height).

.item {
        flex-basis:  | auto; /* default auto */
}

Ако е зададено на 0, допълнителното пространство около съдържанието не се взема предвид. Ако е зададено на auto, допълнителното пространство се разпределя въз основа на стойността му flex-grow.

flex​

Това е съкратеният вариант за комбиниране на flex-grow, flex-shrink и flex-basis. Вторият и третият параметър (flex-shrink и flex-basis) са по избор. Стойността по подразбиране е 0 1 auto, но ако го зададете с едно число, като flex: 5;, това променя flex-basis на 0%, така че е все едно да зададете flex-grow: 5; flex-shrink: 1; flex-basis: 0%;.

.item {
        flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
Информация

Препоръчително е да използвате това съкратено свойство, вместо да задавате отделните свойства. Съкращението задава останалите стойности интелигентно.

align-self​

flex-grow

Това позволява подравняването по подразбиране (или това, зададено от align-items) да бъде отменено за отделни flex елементи.

.item {
        align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Grid​

CSS Grid Layout (известен още като Grid или CSS Grid) е двуизмерна система за оформление, базирана на grid (мрежа), която – в сравнение с всички досегашни системи за уеб оформление – напълно променя начина, по който проектираме потребителски интерфейси. CSS винаги се е използвал за подредбата на уебстраници, но никога не се е справял особено добре с тази задача. Първоначално използвахме таблици, след това плаващи елементи (floats), позициониране и inline-block, но всички тези методи по същество бяха заобиколни решения и лишаваха разработчиците от редица важни функционалности (като например вертикалното центриране).

CSS Flexbox също е отличен инструмент за оформление, но неговият еднопосочен поток е подходящ за други сценарии на употреба – а всъщност двата инструмента си взаимодействат чудесно! CSS Grid е първият CSS модул, създаден специално за решаване на проблемите с оформлението, които сме се опитвали да заобикаляме с различни трикове през цялото време, откакто съществува уеб разработката. [6]

Grid Терминология​

grid container​

Елементът, върху който е приложено свойството display: grid. Той е прекият родител на всички елементи в мрежата (grid items). В този пример container е grid контейнерът.

<div class="container">
  <div class="item item-1"> </div>
  <div class="item item-2"> </div>
  <div class="item item-3"> </div>
</div>

grid item​

Децата (т.е. преките наследници) на grid контейнера. В случая items са grid елементи (grid items), докато sub-item не е такъв.

<div class="container">
        <div class="item"> </div>
        <div class="item">
                <p class="sub-item"> </p>
        </div>
        <div class="item"> </div>
</div>

grid line​

Разделителните линии, които изграждат структурата на grid. Те могат да бъдат вертикални (линии на grid за колони) или хоризонтални (линии на grid за редове) и се намират от двете страни на съответния ред или колона. Тук жълтата линия е пример за линия на grid за колони.

grid line

grid track​

Пространството между две съседни линии на grid. Можете да ги разглеждате като колоните или редовете на grid. Ето я пътеката на grid между втората и третата линия на редовете.

grid track

grid area​

Общата площ, оградена от четири grid линии. Една grid зона може да се състои от произволен брой grid клетки. Ето grid зона между grid линии за редове 1 и 3 и grid линии за колони 1 и 3.

grid area

grid cell​

Пространството между две съседни grid линии за редове и две съседни линии за колони. Това е unit (единица) от grid. Ето клетката от grid, разположена между линиите за редове 1 и 2 и линиите за колони 2 и 3.

grid cell

Grid Properties​

Properties за родителя (Grid Container)​

grid cell

display​

Дефинира елемента като grid container и установява нов контекст на форматиране чрез grid за неговото съдържание.

Стойности:

  • grid - Създава block-level grid.
  • inline-grid - Създава inline-level grid.
.container {
        display: grid | inline-grid;
}

grid-template-*​

Дефинира колоните и редовете на grid чрез списък от стойности, разделени с интервали. Стойностите представляват размера на пътеките, а интервалите между тях – grid линиите.

Стойности:

  • <track-size> - Може да бъде дължина, процент или (fraction) част от свободното пространство в grid чрез използване на единицата fr.
  • <line-name> - Произволно име по ваш избор.
.container {
        grid-template-columns: ...  ...;
        /* e.g. 
        1fr 1fr
        minmax(10px, 1fr) 3fr
        repeat(5, 1fr)
        50px auto 100px 1fr
        */
        grid-template-rows: ... ...;
        /* e.g. 
        min-content 1fr min-content
        100px 1fr max-content
        */
}

На grid линиите автоматично се присвояват положителни числа въз основа на тези зададени стойности (като -1 е алтернатива за самия последен ред).

grid cell

grid-template-areas​

Дефинира grid шаблон чрез препратка към имената на зоните в нея, зададени с помощта на свойството grid-area. Повтарянето на името на дадена зона кара съдържанието да обхване съответните клетки. Точката обозначава празна клетка. Самият синтаксис осигурява визуализация на структурата на grid.

Стойности

  • <grid-area-name> - Името на grid площ, зададено чрез grid-area.
  • . - Точката обозначава празна клетка от grid.
  • none - Не са дефинирани grid площи.
.container {
        grid-template-areas: 
        "<grid-area-name> | . | none | ..."
        "...";
}
.item-a {
        grid-area: header;
}
.item-b {
        grid-area: main;
}
.item-c {
        grid-area: sidebar;
}
.item-d {
        grid-area: footer;
}

.container {
        display: grid;
        grid-template-columns: 50px 50px 50px 50px;
        grid-template-rows: auto;
        grid-template-areas: 
        "header header header header"
        "main main . sidebar"
        "footer footer footer footer";
}

Това ще създаде grid с четири колони и три реда. Целият най-горен ред ще бъде зает от областта на заглавната част (header). Средният ред ще се състои от две основни зони (main), една празна клетка и една зона за странична лента (sidebar). Последният ред изцяло представлява долната част (footer).

grid-template-areas
Бележка

Всеки ред във вашата декларация трябва да има еднакъв брой клетки.

justify-items​

Подравнява grid елементите по оста „inline“ (ред) – за разлика от align-items, който ги подравнява по оста „block“ (колона). Тази стойност се прилага за всички grid елементи в контейнера.

Стойности

  • stretch (по подразбиране): Запълва цялата ширина на клетката.
  • start - Подравнява елементите така, че да са плътно до началния ръб на клетката им.
  • end - Подравнява елементите така, че да са плътно до крайния ръб на клетката им.
  • center - Подравнява елементите в центъра на клетката им.
.container {
        justify-items: start | end | center | stretch;
}

align-items​

Подравнява grid елементите по оста на блока (колоната) – за разлика от justify-items, който ги подравнява по оста на реда (inline оста). Тази стойност се прилага за всички grid елементи в контейнера.

Стойности:

  • stretch (по подразбиране) - Запълва цялата височина на клетката.
  • start - Подравнява елементите плътно към началния ръб на клетката.
  • end - Подравнява елементите плътно към крайния ръб на клетката.
  • center - Подравнява елементите в центъра на клетката.
  • baseline - Подравнява елементите спрямо базовата линия на текста. Съществуват модификатори за базовата линия – first baseline (първа базова линия) и last baseline (последна базова линия), които използват базовата линия съответно на първия или последния ред при многоредов текст.
.container {
        align-items: start | end | center | stretch;
}

justify-content​

Понякога общият размер на вашия grid може да бъде по-малък от размера на неговия grid контейнер. Това може да се случи, ако всички елементи в grid са с размери, зададени чрез non-flexible единици като пиксели (px). В такъв случай можете да зададете подравняването на grid спрямо контейнера. Това свойство подравнява grid по оста на редовете (inline axis) – за разлика от свойството align-content, което подравнява grid по оста на колоните (block axis).

Стойности

  • start - Подравнява grid плътно към началния ръб на grid контейнера.
  • end - Подравнява grid плътно към крайния ръб на grid контейнера.
  • center - Подравнява grid в центъра на grid контейнера.
  • stretch - Променя размера на grid елементите, така че да бъде запълнена цялата ширина на контейнера.
  • space-around - Разпределя равно разстояние между отделните grid елементи, като в двата края се оставя разстояние с наполовина по-малък размер.
  • space-between - Разпределя равно разстояние между отделните grid елементи, без да се оставя разстояние в двата края.
  • space-evenly - Разпределя равно разстояние между отделните grid елементи, включително в двата края.
.container {
        justify-content: start | end | center | stretch | space-around | space-between | space-evenly;    
}

align-content​

Понякога общият размер на вашия grid може да бъде по-малък от размера на grid контейнера. Това може да се случи, ако всички grid елементи са с размери, зададени чрез non-flexible единици като пиксели (px). В такъв случай можете да зададете подравняването на grid спрямо контейнера. Това свойство подравнява grid по оста на блоковете (колоните) – за разлика от justify-content, което подравнява grid по оста на редовете (inline оста).

  • start - Подравнява grid плътно към началния ръб на grid контейнера.
  • end - Подравнява grid плътно към крайния ръб на grid контейнера.
  • center - Подравнява grid в центъра на grid контейнера.
  • stretch - Променя размера на grid елементите, така че цялата височина на контейнера да бъде запълнена.
  • space-around - Разпределя равно разстояние между отделните grid елементи, като в двата края се оставя разстояние с наполовина по-малък размер.
  • space-between - Разпределя равно разстояние между отделните grid елементи, без да се оставя разстояние в двата края.
  • space-evenly - Разпределя равно разстояние между отделните grid елементи, включително в двата края.
.container {
        align-content: start | end | center | stretch | space-around | space-between | space-evenly;    
}

gap​

Свойството gap в CSS е съкратен запис за row-gap и column-gap, който определя размера на разстоянията между редовете и колоните в оформления тип CSS Grid и Flexbox. [7]

/* Grid layout */
.container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 1fr 2fr 1fr;
        gap: 30px 20px;
}

/* Flex layout */
.container {
        display: flex;
        gap: 10%;
}
gap

Properties за децата (Grid Items)​

grid-column-* / grid-row-*​

Определя местоположението на grid елемент чрез препратка към конкретни grid линии. grid-column-start/grid-row-start е линията, от която елементът започва, а grid-column-end/grid-row-end е линията, на която елементът завършва.

Стойности:

  • <line> - Може да бъде число, указващо номерирана grid линия, или име, указващо именувана grid линия.
  • span <number> - Елементът ще обхваща посочения брой grid пътеки.
  • span <name> - Елементът ще се разпростира, докато достигне следващата линия с посоченото име.
  • auto - Указва автоматично разполагане, автоматичен обхват или обхват по подразбиране от една единица.
.item {
        grid-column-start: <number> | <name> | span <number> | span <name> | auto;
        grid-column-end: <number> | <name> | span <number> | span <name> | auto;
        grid-row-start: <number> | <name> | span <number> | span <name> | auto;
        grid-row-end: <number> | <name> | span <number> | span <name> | auto;
}

Пример

.item-a {
        grid-column-start: 2;
        grid-column-end: five;
        grid-row-start: row1-start;
        grid-row-end: 3;
}
grid-column/row

justify-self​

Подравнява grid елемент в рамките на клетка по оста „inline“ (реда) – за разлика от align-self, който подравнява по оста „block“ (колоната). Тази стойност се прилага за grid елемент, разположен в единична клетка.

Стойности:

  • start - Подравнява grid елемента плътно към началния ръб на клетката.
  • end - Подравнява grid елемента плътно към крайния ръб на клетката.
  • center - Подравнява grid елемента в центъра на клетката.
  • stretch - Запълва цялата ширина на клетката (това е настройката по подразбиране).
.item {
        justify-self: start | end | center | stretch;
}

Пример

.item-a {
        justify-self: start;
}
grid justify-self

align-self​

Подравнява grid елемент в рамките на клетка по оста на блока (колоната) – за разлика от justify-self, който подравнява по оста на реда (inline оста). Тази стойност се отнася за съдържанието вътре в самия grid елемент.

Стойности:

  • stretch (по подразбиране) - Запълва цялата височина на клетката.
  • start - Подравнява grid елемента плътно към началния ръб на клетката.
  • end - Подравнява grid елемента плътно към крайния ръб на клетката.
  • center - Подравнява grid елемента в центъра на клетката.
.item {
        align-self: start | end | center | stretch;
}

Пример

.item-a {
        align-self: start;
}
grid align-self

Специални единици, стойности и функции​

fr единица​

Тази единица означава част от оставащото пространство. Така че декларация като:

grid-template-columns: 1fr 3fr;

Най-общо казано, означава 25% и 75%. С тази разлика, че тези процентни стойности са много по-строго фиксирани от дробните единици (fractional units). Например, ако добавите padding към тези колони, дефинирани чрез проценти, ще надхвърлите общата ширина от 100% (приемайки box model от типа content-box). Освен това дробните единици се съчетават много по-удобно с други мерни единици, както лесно може да се предположи:

grid-template-columns: 50px min-content 1fr;

Ключови думи​

Когато определяте размерите на редове и колони, можете да използвате всички познати мерни единици (като px, rem, % и т.н.), но разполагате и с ключови думи:

  • min-content - Минималният размер на съдържанието. Представете си текстов ред като „E pluribus unum“ – min-content вероятно съответства на ширината на думата „pluribus“.
  • max-content - Максималният размер на съдържанието. Ако вземем предвид горното изречение, max-content е дължината на цялото изречение.
  • auto - Тази ключова дума много прилича на единиците fr, с тази разлика, че при разпределянето на оставащото пространство те губят надпреварата за определяне на размера спрямо единиците fr.

Функции за определяне на размера​

  • fit-content() - Използва наличното пространство, но никога по-малко от min-content и никога повече от max-content.
  • max() - CSS функцията max() приема два или повече аргумента (стойности за размер), разделени със запетаи, изчислява ги и връща най-голямата стойност сред тях.
  • min() - CSS функцията min() приема два или повече аргумента (стойности за размер), разделени със запетаи, изчислява ги и връща най-малката стойност сред тях.
  • minmax() - CSS функцията minmax() се използва единствено с CSS Grid за дефиниране на диапазон от размери за grid елементите (т.е. редовете и колоните ѝ). Тя позволява задаването на два аргумента – минимален и максимален размер за даден grid елемент – като по този начин му дава възможност да се разширява и свива в рамките на този диапазон в зависимост от наличното пространство.

Функцията repeat()​

Функцията repeat() може да ни спести време от писане.

grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

/* easier: */
grid-template-columns: repeat(8, 1fr);

/* especially when: */
grid-template-columns: repeat(8, minmax(10px, 1fr));

repeat() може да бъде използван в комбинация и с ключови думи:

  • auto-fill - Побира възможно най-много колони на един ред, дори ако са празни.
  • auto-fit - Побира наличните колони в наличното пространство, като дава предимство на разширяването на колоните за запълване на мястото пред добавянето на празни колони.

Припокриване на елементи​

CSS позиционирането се отнася до управлението на разположението на елементите в уебстраница. Чрез CSS позиционирането можете да промените стандартния поток на документа.

position​

Свойството position определя типа на позициониране за даден елемент. Това свойство може да приема една от следните стойности:

  • static – Tова е стойността по подразбиране; елементът се позиционира според нормалния поток на документа.
  • relative – Eлементът се позиционира спрямо нормалната си позиция в потока на документа.
  • fixed – Eлементът се позиционира спрямо видимата област (viewport).
  • absolute – елементът се позиционира спрямо най-близкия позициониран родителски елемент.
  • sticky – елементът превключва между относително (relative) и фиксирано (fixed) позициониране в зависимост от позицията на скрола.

След това елементите се разполагат на крайната си позиция чрез свойствата top, bottom, left и right.

position: static​

По подразбиране всички HTML елементи са позиционирани статично. Върху статично позиционираните елементи не оказват влияние свойствата top, bottom, left и right. [8]

Елемент с position: static; винаги се позиционира според нормалния поток на страницата:

Code


<style>
div.static {
      position: static;
      border: 3px solid #73AD21;
}
</style>

<div class="static">
      This div element has position: static;
</div>

Preview

position: relative​

Елемент със свойство position: relative; се позиционира спрямо нормалната си позиция в потока на документа.

Задаването на свойствата top, right, bottom и left води до изместване на елемента спрямо нормалната му позиция. Останалите елементи от съдържанието не се пренареждат, за да запълнят евентуалното празно място, оставено от елемента.

Code


<style>
div.relative {
      position: relative;
      border: 3px solid #73AD21;
      left: 30px;
}
</style>

<div class="relative">
      This div element has position: relative;
</div>

Preview

position: fixed​

Елемент с position: fixed; се позиционира спрямо видимата област на екрана (viewport), което означава, че той винаги остава на едно и също място, дори когато страницата се скролва. Свойствата top, right, bottom и left се използват за определяне на крайното местоположение на елемента. [9]

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

Внимание

Примерът с position: fixed не може да бъде показан в документацията, защото контейнерът излиза извън панела. За целта вижте оригиналния пример.

div.fixed {
        position: fixed;
        bottom: 0;
        right: 0;
        width: 300px;
        border: 3px solid #73AD21;
}

position: absolute​

Елемент с position: absolute; се позиционира спрямо най-близкия си позициониран родителски елемент (такъв, чиято стойност на position е различна от static).

Ако обаче елементът с абсолютно позициониране няма позиционирани родителски елементи, той се позиционира спрямо тялото на документа (body) и се премества при превъртане на страницата.

Бележка

Елементите с абсолютно позициониране се изваждат от нормалния поток на документа и могат да се застъпват с други елементи.

Code


<style>
div.relative {
      position: relative;
      width: 400px;
      height: 200px;
      border: 3px solid green;
} 

div.absolute {
      position: absolute;
      top: 80px;
      right: 0;
      width: 200px;
      height: 100px;
      border: 3px solid red;
}
</style>

<div class="relative">This div element has position: relative;
<div class="absolute">This div element has position: absolute;</div>
</div>

Preview

position: sticky​

Елемент със свойство position: sticky; превключва между относително (relative) и фиксирано (fixed) позициониране в зависимост от позицията на скролване. [10]

Лепкавият (sticky) елемент се позиционира относително, докато не се достигне определена позиция на скролване – тогава той залепва на това място (подобно на position: fixed).

Бележка

Трябва да зададете поне едно от свойствата top, right, bottom или left, за да работи позиционирането от тип sticky.

Code


<style>
div.sticky {
      position: sticky;
      top: 0;
      padding: 5px;
      background-color: #cae8ca;
      border: 2px solid #4CAF50;
}
</style>

<div class="sticky">I have position sticky!</div>

<div style="padding-bottom:2000px">
      <p>Scroll back up to remove the stickyness!</p>
      <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
      <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
      <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>

Preview

Поток на текста​

Свързано е с това как текстът и inline елементите се подреждат, пренасят и взаимодействат в нормалния документен поток.

overflow-wrap​

CSS свойството overflow-wrap се прилага към текст и определя дали браузърът трябва да вмъква пренасяне на нов ред в иначе непрекъсваема поредица от символи, за да предотврати излизането на текста извън границите на неговия ред (line box). [11]

Бележка

Първоначално свойството е било нестандартно разширение на Microsoft без префикс, наречено word-wrap, и е било реализирано от повечето браузъри под същото име. Впоследствие е преименувано на overflow-wrap, като word-wrap се запазва като негов псевдоним.

Стойности:

  • normal - Редовете могат да се пренасят само на стандартните места за разделяне на думи (например интервал между две думи).

Code


<style>
div {
      overflow-wrap: normal;
      width: min-content;
      background-color: lavender;
      border: 1px solid indigo;
      padding: 5px;
      max-width: 11em;
}
</style>

<div>
Most words are short & don't need to break. But <strong>Antidisestablishmentarianism</strong> is long. The width is set to min-content, with a max-width of 11em.
</div>

Preview

  • anywhere - За да се предотврати преливане, поредица от знаци, която иначе не би се разделила (като дълга дума или URL адрес), може да бъде прекъсната във всяка точка, ако в реда липсват други допустими места за пренасяне. На мястото на прекъсването не се добавя знак за сричкопренасяне (тире). Възможностите за пренасяне, възникнали вследствие на това разделяне на думата, се вземат предвид при изчисляването на вътрешните размери от типа min-content.

Code


<style>
div {
      overflow-wrap: anywhere;
      width: min-content;
      background-color: lavender;
      border: 1px solid indigo;
      padding: 1rem;
      max-width: 11em;
}
</style>

<div>
Most words are short & don't need to break. But <strong>Antidisestablishmentarianism</strong> is long. The width is set to min-content, with a max-width of 11em.
</div>

Preview

  • break-word - Същото като стойността anywhere – позволява се разделяне на думи, които обикновено не се пренасят, на произволни места, ако в реда липсват други допустими точки за пренасяне; разликата е, че възможностите за пренасяне, възникнали вследствие на това разделяне, НЕ се вземат предвид при изчисляването на вътрешните размери от типа min-content.

Code


<style>
div {
      overflow-wrap: break-word;
      width: min-content;
      background-color: lavender;
      border: 1px solid indigo;
      padding: 1rem;
      max-width: 11em;
}
</style>

<div>
Most words are short & don't need to break. But <strong>Antidisestablishmentarianism</strong> is long. The width is set to min-content, with a max-width of 11em.
</div>

Preview

float​

CSS свойството float позиционира елемент от лявата или дясната страна на неговия контейнер, позволявайки на текста и вградените (inline) елементи да го обгръщат. Елементът се изважда от нормалния поток на страницата, но въпреки това остава част от него (за разлика от абсолютното позициониране). [12]

Стойности:

  • left - Елементът трябва да плава (float) от лявата страна на своя обгръщащ блок.

Code


<style>
.float {
      color: white;
      background-color: darkblue;
      border: 10px solid indigo;
      width: 70px;
      padding: 10px;
      float: left;
}
</style>

<div class="float">
Float me
</div>

<div>
As much mud in the streets as if the waters had but newly retired from the face of the earth, and it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.
</div>

Preview

  • right - Елементът трябва да плава (float) от дясната страна на своя обгръщащ блок.

Code


<style>
.float {
      color: white;
      background-color: darkblue;
      border: 10px solid indigo;
      width: 70px;
      padding: 10px;
      float: right;
}
</style>

<div class="float">
Float me
</div>

<div>
As much mud in the streets as if the waters had but newly retired from the face of the earth, and it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.
</div>

Preview

  • none - Елементът не трябва да плава (float).

Code


<style>
.float {
      color: white;
      background-color: darkblue;
      border: 10px solid indigo;
      width: 70px;
      padding: 10px;
      float: none;
}
</style>

<div class="float">
Float me
</div>

<div>
As much mud in the streets as if the waters had but newly retired from the face of the earth, and it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.
</div>

Preview

  • inline-start - Елементът трябва да плава (float) от началната страна на своя обгръщащ блок. Това е лявата страна при системи за писане от ляво надясно (ltr) и дясната страна при системи за писане от дясно наляво (rtl).

Code


<style>
.float {
      color: white;
      background-color: darkblue;
      border: 10px solid indigo;
      width: 70px;
      padding: 10px;
      float: inline-start;
}
</style>

<div class="float">
Float me
</div>

<div>
As much mud in the streets as if the waters had but newly retired from the face of the earth, and it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.
</div>

Preview

  • inline-end - Елементът трябва да плава (float) от крайната страна на своя обгръщащ блок. Това е дясната страна при системи за писане от ляво надясно (ltr) и лявата страна при системи за писане от дясно наляво (rtl).

Code


<style>
.float {
      color: white;
      background-color: darkblue;
      border: 10px solid indigo;
      width: 70px;
      padding: 10px;
      float: inline-end;
}
</style>

<div class="float">
Float me
</div>

<div>
As much mud in the streets as if the waters had but newly retired from the face of the earth, and it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.
</div>

Preview

Използвана литература​