CSS - właściwości display


display

kod wynik kodu
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<meta http-equiv="Content-Language" content="pl">
<title>CSS - Transition</title>
<link rel="Stylesheet" type="text/css" href="style.css" />
<style type="text/css">
.inline {
  display: inline;
  background: yellow;
}
.block {
  display: block;
  background: pink;
}
.table {
  display: table;
  background: Thistle;
}
.table-caption {
  display: table-caption;
  background: Thistle;
}
.table-column-group {
  display: table-column-group;
  background: Thistle;
}
.table-header-group {
  display: table-header-group;
  background: Thistle;
}
.table-footer-group {
  display: table-footer-group;
  background: Thistle;
}
.table-row-group {
  display: table-row-group;
  background: Thistle;
}
.table-cell {
  display: table-cell;
  background: Thistle;
}
.table-column {
  display: table-column;
  background: Thistle;
}
.table-row {
  display: table-row;
  background: Thistle;
}
.none {
  display: none;
  background: MediumPurple;
}
 </style>
</head>
<body>

<div class="inline">inline - element wierszowy</div>
<div class="inline">inline - element wierszowy</div>

<div class="block">block - element blokowy</div>
<div class="block">block - element blokowy</div>

<div class="table">table</div>
<div class="table">table</div>

<div class="table-caption">table-caption</div>
<div class="table-caption">table-caption</div>

<div class="table-column-group">table-column-group</div>
<div class="table-column-group">table-column-group</div>

<div class="table-header-group">table-header-group</div>
<div class="table-header-group">table-header-group</div>

<div class="table-footer-group">table-footer-group</div>
<div class="table-footer-group">table-footer-group</div>

<div class="table-row-group">table-row-group</div>
<div class="table-row-group">table-row-group</div>

<div class="table-cell">table-cell</div>
<div class="table-cell">table-cell</div>

<div class="table-column">table-column</div>
<div class="table-column">table-column</div>

<div class="table-row">table-row</div>
<div class="table-row">table-row</div>

<div class="none">none</div>
<div class="none">none</div>

</body>
</html>