CSS Layout

box-model.html

<!-- BOX MODEL -->

<style>
  body h1 {
    background: transparent;
    border: 30px solid transparent;
    border-top-width: 60px;
    color: #333;
  }
  
</style>



<h1>Box model</h1>



<div style="
width: 200px;
height: 200px;
background: red;
padding: 20px;
border: 20px solid;
margin: 20px auto;
">content</div>


<h1>Margin</h1>

<div style="
width: 200px;
height: 200px;
background: red;
padding: 20px;
border: 20px solid;
margin: 0 auto;
/*margin-left: -100px;*/
">content</div>


<h1>Some CSS properties related with the box model</h1>

<h1>Box sizing</h1>

<div style="
box-sizing: border-box;
width: 100%;
height: 200px;
background: red;
padding: 20px;
border: 20px solid;
">content</div>


<h1>Background-clip</h1>

<div style="
width: 200px;
height: 200px;
background: red;
background-clip: border-box;
padding: 20px;
border: 20px solid rgba(0,0,0,0.5);
margin: 20px auto;
">content</div>

display-types.html

<!-- DISPLAY TYPES -->

<style>
  body * {
    background: #999;
    color: #FFF;
    padding: 3px;
    margin: 3px;
  }
  
  body h1 {
    background: transparent;
    border: 30px solid transparent;
    border-top-width: 60px;
    color: #333;
  }
  
</style>

<h1>Inline Elements</h1>

<a>a</a>
<span>span</span>
<em>em</em>
<strong>strong</strong>
<input />
<label>label</label>
<br>


<h1>Block Elements</h1>


<div>div</div>
<p>p</p>
<ul>ul</ul>
<li>li</li>
<section>section</section>
<aside>aside</aside>
<article>article</article>
<menu>menu</menu>
<nav>nav</nav>



<h1>Other display types</h1>

<table></table>




<br/><br/><br/><br/>



<h1>Inline padding/margin/width/height</h1>

<hr />
<span>span</span>
<span style="padding: 20px;">span</span>
<span style="padding: 20px; margin: 20px;">span</span>
<span style="padding: 20px; margin: 20px; width: 30px;">span</span>
<span style="padding: 20px; margin: 20px; height: 40px;">span</span>
<hr />
<br/>
<hr />
<span style="padding: 20px; margin: 20px; line-height: 40px;">span</span>
<hr />

<h1>Inline-block padding/margin/width/height</h1>

<hr />
<span style="display: inline-block; padding: 20px;">span</span>
<span style="display: inline-block; padding: 20px; margin: 20px;">span</span>
<span style="display: inline-block; padding: 20px; margin: 20px; width: 30px;">span</span>
<span style="display: inline-block; padding: 20px; margin: 20px; height: 40px;">span</span>
<span style="display: inline-block; padding: 20px; margin: 20px; vertical-align: bottom;">span</span>
<hr />

<h1>Block padding/margin/width/height</h1>

<hr />
<span style="display: block; padding: 20px;">span</span>
<span style="display: block; padding: 20px; margin: 20px;">span</span>
<span style="display: block; padding: 20px; margin: 20px; width: 30px;">span</span>
<span style="display: block; padding: 20px; margin: 20px; height: 40px;">span</span>
<hr />

<h1>Float padding/margin/width/height</h1>

<hr />
<span style="float: left; padding: 20px;">span</span>
<span style="float: left; padding: 20px; margin: 20px;">span</span>
<span style="float: left; padding: 20px; margin: 20px; width: 30px;">span</span>
<span style="float: left; padding: 20px; margin: 20px; height: 40px;">span</span>
<!-- ...repeat... -->
<hr style="clear:both;" />



<h1>Flex padding/margin/width/height</h1>

<div style="display: flex; background: none;">
<span style="padding: 20px;">span</span>
<span style="padding: 20px; margin: 20px;">span</span>
<span style="padding: 20px; margin: 20px; width: 30px;">span</span>
<span style="padding: 20px; margin: 20px; height: 40px;">span</span>
<!-- ...repeat... -->
</div>



<h1>Table-cell padding/margin/width/height</h1>

<div style="display: table; background: none;">
<span style="display: table-cell; padding: 20px;">span</span>
<span style="display: table-cell; padding: 20px; margin: 20px;">span</span>
<span style="display: table-cell; padding: 20px; margin: 20px; width: 30px;">span</span>
<span style="display: table-cell; padding: 20px; margin: 20px; height: 40px;">span</span>
<!-- ...repeat... -->
</div>


<br><br>
<br>

layout.html

<!-- LAYOUT -->
<style>
  body h1 {
    background: transparent;
    border: 30px solid transparent;
    border-top-width: 60px;
    color: #333;
  }
</style>



<h1>LAYOUT</h1>



<h1>Media block</h1>


<div class="l-1">
  <img src="http://placehold.it/100x100">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut condimentum maximus dignissim. Cras blandit felis nec mi feugiat, in lacinia ante consectetur. Cras lacinia diam a arcu mollis, eu pellentesque orci mattis. Donec laoreet mauris dui, a aliquam elit gravida non. Mauris elit elit, hendrerit sed egestas quis, lobortis sed nibh. Donec ornare id justo non dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean nisl tellus, pulvinar vitae diam in, ultricies pellentesque sapien.Etiam a libero malesuada, sollicitudin sem a, scelerisque purus. Morbi vehicula congue accumsan. Duis nisi risus, sodales ac congue a, accumsan ac massa. In hac habitasse platea dictumst. Aenean viverra auctor consectetur. Integer convallis orci sapien, et porta urna pharetra non. Cras tristique est enim, vel iaculis dui molestie ut. Nam in semper sem, et hendrerit turpis. Sed et elit eu dolor dapibus fermentum. Sed dictum sit amet arcu at mattis. Etiam vestibulum ante quis nunc tempor suscipit. Proin vel consectetur felis, et rhoncus sem.</p>
</div>

<style>
  .l-1 {
    font-size: 20px;
    border: 1px solid red;
  }
  
  .l-1 img {
    float: left;
  }
  .l-1 p {
    
  }
</style>


<h1>Opposite</h1>

<div class="l-2">
  <div></div>
  <div></div>
</div>

<!--<style>
  .l-2 {
    font-size: 20px;
    border: 1px solid red;
    overflow: hidden;
  }
  
  .l-2 div {
    width: 100px;
    height: 100px;
    background: #CCC;
  }
  
  .l-2 div:first-child {
    float: left;
  }
  .l-2 div:last-child {
    float: right;
  }
</style>
<style>
  .l-2 {
    font-size: 20px;
    border: 1px solid red;
    display: flex;
    justify-content: space-between;
  }
  
  .l-2 div {
    width: 100px;
    height: 100px;
    background: #CCC;
  }
</style>
-->
<style>
  .l-2 {
    font-size: 20px;
    border: 1px solid red;
    display: flex;
    justify-content: space-between;
  }
  
  .l-2 div {
    width: 100px;
    height: 100px;
    background: #CCC;
  }
</style>



<h1>Grid</h1>

<div class="g">
  <div class="gi"></div>
  <div class="gi"></div>
  <div class="gi"></div>
  <div class="gi"></div>
</div>

<style>
  .g {
    border: 1px solid red;
  }
  
  .gi {
    height: 200px;
    background: #CCC;
    width: 25%;
    
  }
</style>

position.html

<!-- POSITION -->
<style>
  body h1 {
    background: transparent;
    border: 30px solid transparent;
    border-top-width: 60px;
    color: #333;
  }
  
  span {
   background: #DDD;  
  }
</style>



<h1>POSITION</h1>



<h1>Relative top/left</h1>

<div style="height: 100px; border: 1px solid red;">
  <span style="top: 20px;">span</span>
  <span style="position: relative; top: 20px;">span</span>
  <span style="position: relative; left: -10px;">span</span>
  <span style="position: relative;">span</span>
</div>


<h1>Absolute top/left</h1>

<div style="height: 100px; border: 1px solid red;">
  <span style="top: 20px;">span</span> <!-- remove to show auto -->
  <span style="position: absolute; top: 20px;">span</span>
  <span style="position: absolute; left: -10px;">span</span>
  <span style="position: absolute;">span</span>
</div>



<h1>Relative -> height: 100%</h1>

<div style="max-height: 100px; min-height: 100px; border: 1px solid red; text-align: right;">
  <span style="height: 100%;">span</span>
  <span style="display: inline-block; height: 100%;">span</span>
</div>

<h1>Absolute -> height: 100%</h1>

<div style="max-height: 100px; min-height: 100px; position: relative; border: 1px solid red;">
  <span style="height: 100%;">span</span>
  <span style="position: absolute; height: 100%;">span</span>
  <span style="position: absolute; top: 0; bottom: 0; left: 100px">span</span>
</div>


<h1>z-index</h1>

<div style="height: 100px; border: 1px solid red;">
  <span style="position: relative; z-index: 10;">span</span>
  <span style="margin-left: -20px; background: #333;">span</span>
</div>