Boxes & flows · Web Dev 1

Boxes and flows

Everything is a box

Every single thing—every tag—is a box

The browser uses a flow to lay out the page—like how Word or Pages works

HTML

<!--
  # Flow control

  Boxes are controlled by:

  - The available space
  - The display property
-->

CSS

div {
  /* Default: flows with the browser
     CANNOT have margin, padding, width
     <span>, <a>, <strong>, <em>, etc. */
  display: inline;

  /* Forced onto a single line
     CAN have margin, padding, width
     <h1>, <p>, <div>, <figure>, etc. */
  display: block;

  /* Flows with the browser
     CAN have margin, padding, width
     <img>, etc. */
  display: inline-block;
}

CSS

/*
  Reset the layout math:
  - the padding is inside the width
  - friendlier for flexible layouts

  Put this at the top of EVERY CSS file
*/

html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

Browser’s have a few different layout width calculation models. The default is called content-box and the one we’re always going to use is called border-box. When making responsive websites border-box simplifies the math.

With the default content-box if we specify a width the actual layout width is not what we specify but the sum of the width + padding + border so our layouts become cumbersome because we always have to make mathematical choices.

With border-box the width we define is the final width: border and padding are inside what we define, making the math inconsequential.

Centering boxes

text-align: center — works on children only — only works on inline and inline-block

margin: 0 auto — works on the box directly — only works on block

CSS

div {
  width: 50%;                   /* Control the size of a box */
  max-width: 20em;              /* Stop the box from growing wider than defined */
  min-width: 5em;               /* Stop the box from shrinking smaller than defined */
  border: 1px solid #000;       /* Add a stroke around the outside of the box */
                                /*   border: thickness style color; */
  border-radius: 10px;          /* Add rounded corners to a box */
  box-shadow: 1px 1px 5px #000; /* Add a drop shadow to a box */
                                /*   box-shadow: x-offset y-offset blur-radius color; */
  margin: 1rem auto 2rem auto;  /* 4 sides individually: top right bottom left */
                                /*   `auto` allows a display block box to centre */
  padding: 1em;                 /* All 4 sides the same */
  display: inline-block;        /* inline, block, inline-block */
  vertical-align: middle;       /* Shift elements up & down to align different positions */
  text-align: center;           /* Only centres children, not the box itself */
}

Everything is a box

Centering boxes

Videos & tutorials