Презентация на тему CSS. Модель відображення

ніяк не заданий
тип боксу: inline, block, і т.п
положення щодо

аналогія - параграф)
Елементи блокового рівня вишикуються зверху вниз
Елемент блочного

text.

Some inline text
followed by a paragraph

followed by more inline

h4, h5, h6
ol, ul
pre
address
blockquote
dl
fieldset
form
hr
table
display: block, list-item, table, flex...

+ content-width = width батьківського блока

margin
border
padding
content

букв и знаков, составляющих единую стилистическую и композиционную систему,

width = width блоку при content-box
содержащий блок
margin
border
padding
content
width

width блоку при padding-box
содержащий блок
margin
border
padding
content
width

при border-box
содержащий блок
margin
border
padding
content
width

height блоку
содержащий блок
margin
border
padding
content
content

height: 200px;
}




div {
width: 400px;
height: 200px;
}

height: 100px;
}



div {
width: 400px;
height: 100px;
}
div

Lorem ipsum dolor sit amet, vel et sumo aeterno, invidunt

height: 100px;
}
div div {
margin: 0 20px;
}


div {

Lorem ipsum dolor sit amet, vel et sumo aeterno, invidunt

Lorem ipsum dolor sit amet, vel et sumo aeterno, invidunt expetendis sententiae qui an, sit meliore principes no. Natum nullam id mei. Dicta delenit cu nec, vim id mucius conceptam. At laudem electram vim, cum liber iisque atomorum ea. Sed sonet vitae at, probo nostrum copiosae te eam, eu purto semper volumus qui.

et sumo aeterno, invidunt expetendis sententiae qui an, sit

div {
width: 400px;
height: 100px;
}
div div {
height: 100px;
margin: 0 20px;
width: 800px;
}

height: 100px;
}
div div {
height: 100px;
margin:

aeterno, invidunt expetendis sententiae qui an, sit meliore principes

div {
width: 400px;
}
div div {
margin: 20px;
padding: 50px;
}

RIGHT BOTTOM

5000px;

відносно висоти батьківського блоку, але тільки якщо вона задана

Lorem ipsum dolor sit amet, vel et sumo aeterno, invidunt

div div {
margin: 10%;
padding: 10%;
}

%

висоти батьківського блоку, але тільки якщо вона задана явно


div

Lorem ipsum dolor sit amet, vel et sumo aeterno, invidunt

div {
height: 400px;
}
div div {
height: 50%;
width: 50%;
}

Lorem ipsum dolor sit amet, vel et sumo aeterno, invidunt

;
border-type: ;
border-color:

aeterno, invidunt expetendis sententiae qui an, sit meliore principes

div {
border: 20px dotted blue;
}

aeterno, invidunt expetendis sententiae qui an, sit meliore principes

div {
border-width: 20px;
border-style: solid;
border-color: red blue;
}

aeterno, invidunt expetendis sententiae qui an, sit meliore principes

div {
border-width: 20px 40px;
border-style: solid dashed dotted;
border-color: red blue;
}

width = width батьківського блоку
margin + width = width

et sumo aeterno, invidunt expetendis sententiae qui an, sit

.container {
width: 666px;
}
.inner {
background: rgba(0, 0, 255, 0.5)
}

et sumo aeterno, invidunt expetendis

.wrapper { width: 666px; }

.inner

et sumo aeterno, invidunt expetendis

.wrapper { width: 666px; }

.inner

et sumo aeterno, invidunt expetendis sententiae qui an, sit

.wrapper { width: 666px; }

.inner { width: 300px; }

0


Lorem ipsum dolor sit amet, vel et sumo aeterno,

.wrapper { width: 666px; }

.inner {
width: 300px;
margin-right: 0;
}

margin-left не заданий, значить він дорівнює 0

et sumo aeterno, invidunt expetendis sententiae qui an, sit

.wrapper { width: 666px; }

.inner {
width: 300px;
margin-left: auto
}

et sumo aeterno, invidunt expetendis sententiae qui an, sit

.wrapper { width: 666px; }

.inner {
width: 300px;
margin: 0 auto
}

et sumo aeterno, invidunt expetendis sententiae qui an, sit

.wrapper { width: 666px; }

.inner { margin-right: -100px; }

et sumo aeterno, invidunt expetendis sententiae qui an, sit

.wrapper { width: 666px; }

.inner { margin-right: -100px; margin-left: -100px; }

et sumo aeterno, invidunt expetendis sententiae qui an, sit

.wrapper { width: 666px; }

.inner {
width: 50%;
margin-left: -100px;
}

et sumo aeterno, invidunt expetendis sententiae qui an, sit

.wrapper { width: 666px; }

.inner {
width: 50%;
margin-left: auto;
margin-right: -100px;
}

sumo aeterno, invidunt expetendis sententiae qui an, sit meliore

.first { margin-bottom: 30px; }

.second { margin-top: 60px; }

Lorem ipsum dolor sit amet, vel et sumo aeterno, invidunt expetendis sententiae qui an, sit meliore principes no. Natum nullam id mei.

Lorem ipsum dolor sit amet, vel et sumo aeterno, invidunt expetendis sententiae qui an, sit meliore principes no. Natum nullam id mei.

Lorem ipsum dolor sit amet, vel et sumo aeterno, invidunt expetendis sententiae qui an, sit meliore principes no. Natum nullam id mei.

ОЧІКУВАННЯ

РЕАЛЬНІСТЬ

sumo aeterno, invidunt expetendis sententiae qui an, sit meliore

.inner { margin-top: 30px; }

Lorem ipsum dolor sit amet, vel et sumo aeterno, invidunt expetendis sententiae qui an, sit meliore principes no. Natum nullam id mei.

ОЧІКУВАННЯ

РЕАЛЬНІСТЬ

що належать одному контексту форматування, перетинаються margin'и, то
Беруться максимальний

sumo aeterno, invidunt expetendis sententiae qui an, sit meliore

.first { margin-bottom: 60px; }

.second { margin-top: 100px; }

ОЖИДАНИЕ

РЕАЛЬНОСТЬ

Lorem ipsum dolor sit amet, vel et sumo aeterno, invidunt expetendis sententiae qui an, sit meliore principes no. Natum nullam id mei.

Lorem ipsum dolor sit amet, vel et sumo aeterno, invidunt expetendis sententiae qui an, sit meliore principes no. Natum nullam id mei.

Lorem ipsum dolor sit amet, vel et sumo aeterno, invidunt expetendis sententiae qui an, sit meliore principes no. Natum nullam id mei.

sumo aeterno, invidunt expetendis sententiae qui an, sit meliore

.first { margin-bottom: 60px; }

.second { margin-top: -60px; }

ОЖИДАНИЕ

РЕАЛЬНОСТЬ

Lorem ipsum dolor sit amet, vel et sumo aeterno, invidunt expetendis sententiae qui an, sit meliore principes no. Natum nullam id mei.

Lorem ipsum dolor sit amet, vel et sumo aeterno, invidunt expetendis sententiae qui an, sit meliore principes no. Natum nullam id mei.

Lorem ipsum dolor sit amet, vel et sumo aeterno, invidunt expetendis sententiae qui an, sit meliore principes no. Natum nullam id mei.

sumo aeterno, invidunt expetendis sententiae qui an, sit meliore

.first { margin-bottom: 60px; }

.second { margin-top: -80px; }

ОЖИДАНИЕ

РЕАЛЬНОСТЬ

Lorem ipsum dolor sit amet, vel et sumo aeterno, invidunt expetendis sententiae qui an, sit meliore principes no. Natum nullam id mei.

Lorem ipsum dolor sit amet, vel et sumo aeterno, invidunt expetendis sententiae qui an, sit meliore principes no. Natum nullam id mei.

Lorem ipsum dolor sit amet, vel et sumo aeterno, invidunt expetendis sententiae qui an, sit meliore principes no. Natum nullam id mei.

шикуються зліва направо зверху вниз
Елемент інлайн рівня бере участь

followed by more inline text.
Some inline text followed by a

followed by a span

реагує на вертикальні margin'и
padding'і не зачіпають висоту рядка

amet, vel et sumo aeterno, invidunt expetendis sententiae qui

Lorem ipsum dolor sit amet, vel et sumo aeterno, invidunt expetendis sententiae qui an, sit meliore principes no. Natum nullam id mei.

code, dfn, em, kbd, strong, samp, var
a, bdo, br,

вертикальні margin'и
padding'і зачіпають висоту рядка
створює усередині себе новий блоковий