Как работает css flexbox: наглядное введение в систему компоновки элементов на веб-странице

Использование display для строчных элементов

Свойство CSS display также используется для изменения поведения строчных и блочных элементов.

Напомню, что блочные элементы занимают все доступное им пространство и начинаются с новой строки. Например, абзацы или блоки div — это блочные элементы.

Строчные элементы занимают только необходимое для отображения пространство и не начинаются с новой строки. В качестве примеров строчных элементов можно привести span, тег ссылки и т.д.

Свойство HTML display позволяет изменять поведение строчных и блочных элементов.

Чтобы изменить поведение блочного элемента на поведение строчного:

display: inline;

Чтобы изменить поведение строчного элемента на поведение блочного:

display: block;

В следующем примере поведение элемента span изменяется на поведение блочного элемента. А поведение абзаца с помощью свойства CSS display изменяется на поведение строчного элемента.

Чтобы понять, в чем заключается разница, сначала посмотрите на приведенный ниже рисунок и исходный код, в котором свойство HTML display еще не применено:

Посмотреть онлайн демо-версию и код

На странице демо-версии отображен родительский div, а внутри него span и абзац. Изначально их поведение является стандартным для этих элементов:

  • Родительский div очерчен черной рамкой и занимает всю доступную ширину;
  • span очерчен синей рамкой, внутри div он занимает только необходимое для отображения пространство и начинается с той же самой строки;
  • Абзац, который очерчен красной рамкой, также занимает все доступное пространство и начинается с новой строки.

Теперь с помощью HTML display block я изменю поведение span на поведение блочного элемента, а поведение абзаца на поведение строчного. Родительский div остается без изменений. Смотрите результат и демо-версию:

Посмотреть онлайн демо-версию и код

span начинается с новой строки и границы абзаца заканчивается там, где заканчивается его текст. Он не занимает всю доступную ширину, как div или span.

Пожалуйста, оставляйте ваши комментарии по текущей теме материала. Мы очень благодарим вас за ваши комментарии, лайки, отклики, дизлайки, подписки!

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background
Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS SpecificityCSS !important

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Color KeywordsCSS Gradients
Linear Gradients
Radial Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS Image ReflectionCSS object-fitCSS object-positionCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive

JavaScript

JS Array
concat()
constructor
copyWithin()
entries()
every()
fill()
filter()
find()
findIndex()
forEach()
from()
includes()
indexOf()
isArray()
join()
keys()
length
lastIndexOf()
map()
pop()
prototype
push()
reduce()
reduceRight()
reverse()
shift()
slice()
some()
sort()
splice()
toString()
unshift()
valueOf()

JS Boolean
constructor
prototype
toString()
valueOf()

JS Classes
constructor()
extends
static
super

JS Date
constructor
getDate()
getDay()
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTime()
getTimezoneOffset()
getUTCDate()
getUTCDay()
getUTCFullYear()
getUTCHours()
getUTCMilliseconds()
getUTCMinutes()
getUTCMonth()
getUTCSeconds()
now()
parse()
prototype
setDate()
setFullYear()
setHours()
setMilliseconds()
setMinutes()
setMonth()
setSeconds()
setTime()
setUTCDate()
setUTCFullYear()
setUTCHours()
setUTCMilliseconds()
setUTCMinutes()
setUTCMonth()
setUTCSeconds()
toDateString()
toISOString()
toJSON()
toLocaleDateString()
toLocaleTimeString()
toLocaleString()
toString()
toTimeString()
toUTCString()
UTC()
valueOf()

JS Error
name
message

JS Global
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()

JS JSON
parse()
stringify()

JS Math
abs()
acos()
acosh()
asin()
asinh()
atan()
atan2()
atanh()
cbrt()
ceil()
clz32()
cos()
cosh()
E
exp()
expm1()
floor()
fround()
LN2
LN10
log()
log10()
log1p()
log2()
LOG2E
LOG10E
max()
min()
PI
pow()
random()
round()
sign()
sin()
sqrt()
SQRT1_2
SQRT2
tan()
tanh()
trunc()

JS Number
constructor
isFinite()
isInteger()
isNaN()
isSafeInteger()
MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
NaN
POSITIVE_INFINITY
prototype
toExponential()
toFixed()
toLocaleString()
toPrecision()
toString()
valueOf()

JS OperatorsJS RegExp
constructor
compile()
exec()
g
global
i
ignoreCase
lastIndex
m
multiline
n+
n*
n?
n{X}
n{X,Y}
n{X,}
n$
^n
?=n
?!n
source
test()
toString()

(x|y)
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx

JS Statements
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
return
switch
throw
try…catch
var
while

JS String
charAt()
charCodeAt()
concat()
constructor
endsWith()
fromCharCode()
includes()
indexOf()
lastIndexOf()
length
localeCompare()
match()
prototype
repeat()
replace()
search()
slice()
split()
startsWith()
substr()
substring()
toLocaleLowerCase()
toLocaleUpperCase()
toLowerCase()
toString()
toUpperCase()
trim()
valueOf()

Definition and Usage

The display property sets or returns the element’s display type.

Elements in HTML are mostly «inline» or «block» elements: An inline element
has floating content on its left and right side. A block element fills the
entire line, and nothing can be displayed on its left or right side.

The display property also allows the author to show or hide an element. It is
similar to the visibility property. However, if you set , it hides
the entire element, while means that the contents of the
element will be invisible, but the element stays in its original position and
size.

Tip: If an element is a block element, its display type can also be
changed with the float property.

Property Values

Value Description Play it
inline Displays an element as an inline element (like <span>).
Any height and width properties will have no effect
Play it »
block Displays an element as a block element (like <p>). It starts on a
new line, and takes up the whole width
Play it »
contents Makes the container disappear, making the child elements children of the
element the next level up in the DOM
Play it »
flex Displays an element as a block-level flex container Play it »
grid Displays an element as a block-level grid container Play it »
inline-block Displays an element as an inline-level block container. The element itself is formatted as an inline
element
, but you can apply height and width values
Play it »
inline-flex Displays an element as an inline-level flex container Play it »
inline-grid Displays an element as an inline-level grid container Play it »
inline-table The element is displayed as an inline-level table Play it »
list-item Let the element behave like a <li> element Play it »
run-in Displays an element as either block or inline, depending on context Play it »
table Let the element behave like a <table> element Play it »
table-caption Let the element behave like a <caption> element Play it »
table-column-group Let the element behave like a <colgroup> element Play it »
table-header-group Let the element behave like a <thead> element Play it »
table-footer-group Let the element behave like a <tfoot> element Play it »
table-row-group Let the element behave like a <tbody> element Play it »
table-cell Let the element behave like a <td> element Play it »
table-column Let the element behave like a <col> element Play it »
table-row Let the element behave like a <tr> element Play it »
none The element is completely removed Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

Property Values

Value Description
block Element is rendered as a block-level element
compact Element is rendered as a block-level or inline element. Depends on context
flex Element is rendered as a block-level flex box. New in CSS3
inline Element is rendered as an inline element. This is default
inline-block Element is rendered as a block box inside an inline box
inline-flex Element is rendered as a inline-level flex box. New in CSS3
inline-table Element is rendered as an inline table (like <table>), with no line break before or after the table
list-item Element is rendered as a list
marker This value sets content before or after a box to be a marker (used with :before and :after pseudo-elements. Otherwise this value is identical to «inline»)
none Element will not be displayed
run-in Element is rendered as block-level or inline element. Depends on context
table Element is rendered as a block table (like <table>), with a line break before and after the table
table-caption Element is rendered as a table caption (like <caption>)
table-cell Element is rendered as a table cell (like <td> and <th>)
table-column Element is rendered as a column of cells (like <col>)
table-column-group Element is rendered as a group of one or more columns (like <colgroup>)
table-footer-group Element is rendered as a table footer row (like <tfoot>)
table-header-group Element is rendered as a table header row (like <thead>)
table-row Element is rendered as a table row (like <tr>)
table-row-group Element is rendered as a group of one or more rows (like <tbody>)
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS Font FallbacksCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function

backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside

caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor

direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight

gap
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows

hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing

line-height
list-style
list-style-image
list-style-position
list-style-type

margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode

object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y

padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes

resize
right
row-gap

scroll-behavior

tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top

transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function

unicode-bidi
user-select

vertical-align
visibility

white-space
width
word-break
word-spacing
word-wrap
writing-mode

z-index

Examples

Example

<div class=»w3-display-container w3-green» style=»height:300px;»>
  <div class=»w3-display-topleft»>Top Left</div>
  <div class=»w3-display-topright»>Top Right</div>
  <div class=»w3-display-bottomleft»>Bottom Left</div>
  <div class=»w3-display-bottomright»>Bottom Right</div>  <div class=»w3-display-left»>Left</div>  <div class=»w3-display-right»>Right</div>  <div class=»w3-display-middle»>Middle</div>
  <div class=»w3-display-topmiddle»>Top Mid</div>
  <div class=»w3-display-bottommiddle»>Bottom Mid</div>
</div>

Same example as above with added padding:

Top Left
Top Right

Left
Right
Middle
Top Middle

Example

<div class=»w3-display-container w3-green» style=»height:300px;»>
  <div class=»w3-padding w3-display-topleft»>Top Left</div>
  <div class=»w3-padding w3-display-topright»>Top Right</div>
  <div class=»w3-padding w3-display-bottomleft»>Bottom Left</div>
  <div class=»w3-padding w3-display-bottomright»>Bottom Right</div>  <div class=»w3-padding w3-display-left»>Left</div>  <div class=»w3-padding w3-display-right»>Right</div>
  <div class=»w3-padding w3-display-middle»>Middle</div>
  <div class=»w3-padding w3-display-topmiddle»>Top Mid</div>
  <div class=»w3-padding w3-display-bottommiddle»>Bottom Mid</div>
</div>

Displaying text inside an image:

Top Left
Top Right

Top Mid
Left
Right
Middle

Example

<div class=»w3-display-container»>
  <img src=»img_lights.jpg» alt=»Lights» style=»width:100%»>
  <div class=»w3-padding w3-display-topleft»>Top Left</div>
  <div class=»w3-padding w3-display-topright»>Top Right</div>
  <div class=»w3-padding w3-display-bottomleft»>Bottom Left</div>
  <div class=»w3-padding w3-display-bottomright»>Bottom Right</div>
  <div class=»w3-padding w3-display-topmiddle»>Top Mid</div>  <div class=»w3-padding w3-display-left»>Left</div>  <div class=»w3-padding w3-display-right»>Right</div>
  <div class=»w3-padding w3-display-middle»>Middle</div>
  <div class=»w3-padding w3-display-bottommiddle»>Bottom Mid</div>
</div>

Override The Default Display Value

As mentioned, every element has a default display value. However, you can
override this.

Changing an inline element to a block element, or vice versa, can be useful for
making the page look a specific way, and still follow the web standards.

A common example is making inline elements for horizontal menus:

li {  display: inline;}

Note: Setting the display property of an element only changes how the element is displayed,
NOT what kind of element it is. So, an inline element with is not allowed
to have other block elements inside it.

The following example displays <span> elements as block elements:

span {  display: block;}

The following example displays <a> elements as block elements:

Помните макеты на основе таблиц?

Несмотря на то, что большинство из нас больше не использует табличную верстку, display: table CSS и inline table CSS может оказаться полезно в некоторых случаях. Например, если вы хотите выводить таблицы только на более широких макетах, а для меньших экранов хотите сохранить стандартное расположение блоков. Этого можно достигнуть с помощью комбинации медиа-запросов и свойства display.

table Соответствует HTML-элементу <table>. Определяет структурный блок.
table-header-group Соответствует HTML-элементу <thead>.
table-row Соответствует HTML-элементу <tr>.
display table-cell Соответствует HTML-элементу <td>.
table-row-group Соответствует HTML-элементу <tbody>.
table-footer-group Соответствует HTML-элементу <tfoot>.
table-column-group Соответствует HTML-элементу <colgroup>.
table-column Соответствует HTML-элементу <col>.
table-caption Соответствует HTML-элементу <caption>.
inline-table CSS Это единственное значение, которое не имеет непосредственного отношения к HTML-элементам. Элемент ведет себя, как табличный. Но как встроенный, а не элемент блочного уровня.
@media screen and (min-width: 720px) {
  .table {
    display: table;
    width: 100%;
    border-collapse: collapse;
  }
}
.tr {
  margin-bottom: 1.6rem;
}
@media screen and (min-width: 720px) {
  .tr {
    display: table-row;
  }
}
@media screen and (min-width: 720px) {
  .td {
    display: table-cell;
    border: #f0f0f0 1px solid;
    padding: 0.4rem;
  }
  .td:first-child {
    width: 11em;
  }
}
.th {
  font-size: 1rem;
  line-height: 1.6rem;
  font-family: "Palo Alto";
}
@media screen and (min-width: 720px) {
  .th {
    font-size: 1.294rem;
    line-height: 1.6rem;
  }
}
@media screen and (min-width: 720px) {
  .th {
    font-size: 0.8rem;
    line-height: 1.6rem;
    font-family: "Roboto Slab", Rockwell, serif;
    font-weight: 700;
  }
}
@media screen and (min-width: 720px) and (min-width: 720px) {
  .th {
    font-size: 1rem;
    line-height: 1.6rem;
  }
}
.th::before {
  content: 'display: ';
}
@media screen and (min-width: 720px) {
  .th::before {
    content: '';
  }
}
.th::after {
  content: ';';
}
@media screen and (min-width: 720px) {
  .th::after {
    content: '';
  }
}

The display: inline-block Value

Compared to , the major
difference is that allows
to set a width and height on the element.

Also, with , the top and bottom margins/paddings are respected,
but with they are not.

Compared to , the major
difference is that does
not add a line-break after the element, so the element can sit next to other
elements.

The following example shows the different behavior of ,
and :

Example

span.a {  display: inline; /* the default for span */ 
width: 100px;  height: 100px; 
padding: 5px;  border: 1px solid blue;   background-color: yellow; }span.b {
  display:
inline-block;  width: 100px;  height:
100px;  padding: 5px;  border: 1px
solid blue;   background-color: yellow; }
span.c {  display: block;  width:
100px;  height: 100px;  padding: 5px; 
border: 1px solid blue;   background-color: yellow; }

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Color KeywordsCSS Gradients
Linear Gradients
Radial Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS Image ReflectionCSS object-fitCSS object-positionCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive

Пример применения свойства display для отображения / скрытия меню

Я использовал элемент div, который содержит маркированный список <ul>, элементы списка и гиперссылки. Ссылки представляют собой пункты меню.

Для разработки этого меню использовался ряд других свойств CSS. Свойство display изначально задано не было. Это означает, что меню будет отображаться.

Посмотреть онлайн демо-версию и код

Родительский div содержит меню, которое представляет собой сочетание элементов ul, li и <a>. При использовании display: none элемент div будет скрыт, как и все меню. Когда меню исчезает, ссылки перемещаются вверх, занимая пространство меню, потому что при использовании HTML display none элемент, к которому применено свойство, больше не будет занимать отведенное для него пространство.

Если после этого вы нажмете на ссылку показать меню, код jQuery добавит значение display: initial. Это сделает меню видимым, а ссылки сместятся вниз.

More Examples

Difference between the display property and the visibility property:

function demoDisplay() {  document.getElementById(«myP1»).style.display = «none»;
}function demoVisibility() {  document.getElementById(«myP2»).style.visibility = «hidden»;
}

Toggle between hiding and showing an element:

function myFunction() {  var x = document.getElementById(‘myDIV’);  if (x.style.display === ‘none’) {
    x.style.display = ‘block’;  } else {    x.style.display = ‘none’;
  }}

Difference between «inline», «block» and «none»:

function myFunction(x)  {  var whichSelected = x.selectedIndex;  var sel = x.options.text;
  var elem = document.getElementById(«mySpan»);
  elem.style.display = sel;}

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS SpecificityCSS !important

More Examples

Example

A demonstration of how to use the contents property value. In the following
example the .a container will disappear, and making the child elements (.b)
children of the element the next level up in the DOM:

.a {  display: contents;  border:
2px solid red;  background-color: #ccc;  padding: 10px;  width: 200px;}.b {  border: 2px solid blue;
  background-color: lightblue;  padding: 10px;}

Example

A demonstration of how to use the inherit property value:

body {  display: inline;}p {  display: inherit;}

Example

Set the direction of some flexible items inside a <div> element in reverse
order:

div {  display: flex;  flex-direction: row-reverse;}

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgapgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightrow-gapscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

W3.CSS Display Classes

W3.CSS provides the following display classes: 

Class Defines
w3-display-container Container for w3-display-classes
w3-display-topleft Displays content at the top left corner of the w3-display-container
w3-display-topright Displays content at the top right corner of the w3-display-container
w3-display-bottomleft Displays content at the bottom left corner of the w3-display-container
w3-display-bottomright Displays content at the bottom right corner of the w3-display-container
w3-display-left Displays content to the left (middle left) of the w3-display-container
w3-display-right Displays content to the right (middle right) of the w3-display-container
w3-display-middle Displays content in the middle (center) of the w3-display-container
w3-display-topmiddle Displays content at the top middle of the w3-display-container
w3-display-bottommiddle Displays content at the bottom middle of the w3-display-container
w3-display-position Displays content at a specified position in the w3-display-container
w3-display-hover Displays content on hover inside the w3-display-container
w3-left Floats an element to the left (float: left)
w3-right Floats an element to the right (float: right)
w3-show Shows an element (display: block)
w3-hide Hides an element (display: none)
w3-mobile Adds mobile-first responsiveness to any element.Displays
elements as block elements on mobile devices

Display Hover

The w3-display-hover class displays content on hover inside a w3-display-container (goes from hidden to shown).

Top Left
Top Right

Left
Right
Mouse over this box!
Top Mid

Example

<div class=»w3-display-container w3-light-grey» style=»height:300px;»> 
<div class=»w3-display-topleft w3-display-hover»>Top Left</div>  <div
class=»w3-display-topright w3-display-hover»>Top Right</div>  <div
class=»w3-display-bottomleft w3-display-hover»>Bottom Left</div> 
<div class=»w3-display-bottomright w3-display-hover»>Bottom Right</div> 
<div class=»w3-display-left w3-display-hover»>Left</div>  <div
class=»w3-display-right w3-display-hover»>Right</div>  <div
class=»w3-display-middle»>Mouse over this box!</div>  <div
class=»w3-display-topmiddle w3-display-hover»>Top Mid</div>  <div
class=»w3-display-bottommiddle w3-display-hover»>Bottom Mid</div></div>

The w3-display-hover classes can be combined with effect and
animation classes to create cool hover effects:


John Doe

Shop Now

Example

 <div class=»w3-display-container w3-hover-opacity»>  <img src=»img_avatar.png»
alt=»Avatar»>  <div class=»w3-display-middle w3-display-hover»>    <button class=»w3-button
w3-black»>John Doe</button>  </div></div>

You will learn more about animations and effects later in this tutorial.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock
detector