Web Development

Lecture Objectives

• learn that, from a CSS point-of-view, a web page is a tree of boxes of various types
• learn about the parts of those boxes
• learn about box sizes in CSS

Warning

Fog of details ahead!

Do not 'learn off'.
Look-up when needed.

Boxes

Every HTML element and run of text generates
zero, one or more CSS boxes

Visually, the tree of elements becomes a tree of boxes.

In CSS, we can style the boxes.

Outer Display Type

Every box has an outer display type,
either block or inline.

This determines how the box is laid out in flow layout.

Flow Layout

• If an element has block outer display type:
  • its box starts on a new line;
  • it takes up the full width available (i.e. the width of its container);
  — hence they stack vertically.
• If an element has inline outer display type:
  • its box continues on the current line, if it can;
  • it takes up only as much width as necessary for its content;
  — hence they are are laid out horizontally.

Inner Display Type

• Every box also has an inner display type.
• This determines how its contents (its child boxes) are laid out.
  • Most commonly, this will also be flow layout.
  • But CSS3 also offers flexbox layout and grid layout.

The display Property

You can choose the outer and inner display types by setting a value for the display property.
There are about 20 possible values, e.g.:

Default Display Type

• The initial value for all boxes is display: inline
• But your browser's default stylesheet applies a more sensible value, e.g.:

  
  header, nav, main, section, article, aside, footer,
  figure, figcaption, div, p, h1, h2, h3, h4, h5, h6, 
  ul, ol, form, fieldset {
      display: block;
  }

  leaving, e.g., em, i, strong, b, span, a, img,… as inline.

Changing the Display Type

You can change an element's display type in your own stylesheet, e.g.

img {
    display: block;
}
    

(In a previous lecture, we wrapped an image inside a figure to make it appear on a new line.)

The Box Model

The Box Model

Sizes

We may wish to set the width or height of a box or part of a box, e.g.

<p>
    To a child, a cardboard box is a place to 
    hide, a place to sleep. A racing car, a
    ship on the high but dry seas. Upturned,
    it is a table, a drum. A platform for the
    imagination. But, made of card, it is
    soon discarded.
<p>
        

p {
    margin: 1em;
    border: 1px solid black;
    padding: 2em;
    width: 30em;
}       

We can use absolute values or relative values

Absolute and Relative Values

• Absolute values: do not depend on anything else, e.g.:
  • 200px
• Relative values: depend on something else, e.g.:
  • 50em: depends on this element's font size
  • 50rem: depends on the root element's font size (usually 16px)
  • 50%: depends on the parent's width
  • 50vw: percentage of the viewport width
  • 50vh: percentage of the viewport's height

Absolute vs. Relative: Example

• Recall our discussion of fixed-width layouts and liquid layouts
• Fixed-width: use absolute values
• Liquid: use relative values

Fixed-width Layouts

html {
    background-color: white;
}
                    
body {
    width: 960px;
    margin: 0 auto;
    background-color: green;
}
        

Liquid Layouts

html {
    background-color: white;
}
                    
body {
    width: 80%;
    margin: 0 auto;
    background-color: green;
}

Total Width of a Box

The total width of a box on the screen is:

left margin + left border + left padding +
width of content
+ right padding + right border + right margin

Setting the Width

You can set the width of an element, e.g.

p {
    width: 50em;
}
        

But what does this affect?
just the content? the whole box? something else?

It depends on the box-sizing property.

box-sizing

• box-sizing: content-box (default):
  • when you set the width of an element, you are setting the width of the content.
• box-sizing: border-box:
  • when you set the width of an element, you are setting the width for the left- and right-borders, left- and right-padding and the width of the content.

Example of Setting Width

Ignoring margins, how wide will the content of this paragraph be? And what will the total width of the box be?

p {
    box-sizing: content-box;
    border: 5px solid black;
    padding: 10px;
    width: 500px;
}
    

Example of Setting Width

Ignoring margins, how wide will the content of this paragraph be? And what will the total width of the box be?

p {
    box-sizing: border-box;
    border: 5px solid black;
    padding: 10px;
    width: 500px;
}
    

Setting the Width

Many web developers believe that
box-sizing: border-box
is more intuitive than the default, especially for web page layout.

Hence, to make a global change, they include this in their CSS:

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

Setting the Width

You can set the width, min-width and max-width.

What values can you use?

• A length (e.g. px, em, rem, vw, vh) or percentage
• auto: the browser decides;
• max-content: as wide as it needs to be;
• min-content: as narrow as it can be;
• fit-content: as wide as the available space but no more than max-content

Setting the Width

Setting the width will not always perform as you would expect.

If you want to set the width of an inline element, use
display: inline-block;

Setting the Height

You can also set the height of an element, similarly.

Advice:
Avoid setting heights, if you can.

If you set a height, the browser may need to display horizontal scrollbars — which users dislike.

G'luck!