CSS layout principles

Table of Contents

1. Box model
2. Display
3. Position
4. Layout
   1. Block
   2. Inline block
   3. Float
   4. Flex

Box model

Box model

//html
<div class="simple">Simple div</div>
<div class="fancy">Fancy div</div>

//css
div {
  width: 500px;
  margin: 20px auto;
  border: solid #aaa;
}

.simple {
  background: yellow;  
}

.fancy {
  padding: 50px;
  border-width: 10px;
  background: orange;
}

Box sizing

caniuse.com

The box-sizing property is used to alter the default CSS box model used to calculate width and height of the elements

box-sizing: content-box|border-box|initial|inherit;

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

altijd gerbuiken? =>

Box sizing

//html
<div class="simple">Simple div</div>
<div class="fancy">Fancy div</div>

//css
div {
  box-sizing: border-box;
  width: 500px;
  margin: 20px auto;
  border: solid #aaa;
}

.simple {
  background: yellow;  
}

.fancy {
  padding: 50px;
  border-width: 10px;
  background: orange;
}

Display

The display CSS property specifies the type of rendering box used for an element. In HTML, default display property values are taken from behaviors described in the HTML specifications or from the browser/user default stylesheet. 

display: none | inline | block | list-item | inline-list-item | inline-block | 
inline-table | table | table-cell | table-column | table-column-group | 
table-footer-group | table-header-group | table-row | table-row-group | 
flex | inline-flex | grid | inline-grid | run-in | ruby | ruby-base | ruby-text | 
ruby-base-container | ruby-text-container | contents

Block

//html
<div class="simple">Simple <span>div</span></div>
<div class="fancy">Fancy div</div>

//css
div {
  box-sizing: border-box;
  width: 500px;
  margin: 20px auto;
  border: solid #aaa;
}

span{
  display: block;
  color: red;
}

.simple {
  background: yellow;  
}

.fancy {
  padding: 50px;
  border-width: 10px;
  background: orange;
}

Inline

//html
<div class="simple">Simple <span>div</span></div>
<div class="fancy">Fancy div</div>

//css
div {
  display: inline;
  box-sizing: border-box;
  width: 500px; //does not work here
  margin: 20px auto;
  border: solid #aaa;
}

span{
  color: red;
}

.simple {
  background: yellow;  
}

.fancy {
  padding: 50px;
  border-width: 10px;
  background: orange;
}

Inline-block

//html
<div class="simple">Simple <span>div</span></div>
<div class="fancy">Fancy div</div>

//css
div {
  box-sizing: border-box;
  width: 500px;
  margin: 20px auto;
  border: solid #aaa;
}

span{
  display: inline-block;
  width: 200px;
  color: red;
  background: white;
}

.simple {
  background: yellow;  
}

.fancy {
  padding: 50px;
  border-width: 10px;
  background: orange;
}

Flex

Displays an element as an block-level flex container.

//html
<div class="simple">Simple <span>div</span></div>
<div class="fancy">Fancy div</div>

//css
div {
  display: flex;
  box-sizing: border-box;
  width: 500px;
  margin: 20px auto;
  border: solid #aaa;
}

span{
  display: flex;
  color: red;
}

.simple {
  background: yellow;  
}

.fancy {
  padding: 50px;
  border-width: 10px;
  background: orange;
}

none

//html
<div class="simple">Simple <span>div</span></div>
<div class="fancy">Fancy div</div>

//css
div {
  box-sizing: border-box;
  width: 500px;
  margin: 20px auto;
  border: solid #aaa;
}

span{
  display: none;
  color: red;
}

.simple {
  background: yellow;  
}

.fancy {
  padding: 50px;
  border-width: 10px;
  background: orange;
}

Position

The position CSS property chooses alternative rules for positioning elements, designed to be useful for scripted animation effects.

position: static|absolute|fixed|relative|initial|inherit;

static

Default value. Elements render in order, as they appear in the document flow

relative

The element is positioned relative to its normal position, so "left:20px" adds 20 pixels to the element's LEFT position

//html
<div class="simple">Simple div
  <div class="fancy">Fancy div</div>
</div>

//css
div {
  box-sizing: border-box;
  border: solid #aaa;
}

.simple {
  width: 500px;
  margin: 20px auto;
  background: yellow;
}

.fancy {
  position: relative;
  top: 20px;
  left: 20px;
  width: 200px;
  padding: 50px;
  border-width: 10px;
  background: orange;
}

Fixed

//html
<div class="simple">Simple div
  <div class="fancy">Fancy div</div>
</div>

//css
div {
  box-sizing: border-box;
  border: solid #aaa;
}

.simple {
  width: 500px;
  margin: 20px auto;
  background: yellow;
}

.fancy {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 200px;
  padding: 50px;
  border-width: 10px;
  background: orange;
}

Absolute

    The element is positioned relative to its first positioned (not static) ancestor element

//html
<div class="simple">Simple div
  <div class="fancy">Fancy div</div>
</div>

//css
div {
  box-sizing: border-box;
  border: solid #aaa;
}

.simple {
  position: relative
  width: 500px;
  margin: 20px auto;
  background: yellow;
}

.fancy {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 200px;
  padding: 50px;
  border-width: 10px;
  background: orange;
}