## Lecture 1 (13:00)

### Box Dimensions

- A box is sized just big enough for its contents by default.
- Dimensions are usually specified using either relative or absolute dimensions.
	- Most common dimensions are px, %, or ems.

#### Relative Dimensions / Measurements

- Relative length units scale better between different rendering mediums.

| Unit | Description |
|-----|-------------|
| em | Relative to the font-size of the element (2em means 2times the size of the current font) |
| ex  | Relative to the x-height of the current font (rarely used) |
| ch | Relative to width of the "0" (zero) |
| rem | Relative to font-size of the root element |
| vw | Relative to 1% of the width of the viewport |
| vh | Relative to 1% of the height of the viewport |
| vmin | Relative to 1% of viewport's smaller dimension |
| vmax | Relative to 1% of viewport's larger dimension |
| % | Percentage of container dimension |

#### Absolute Dimensions

- Absolute length units are not recommended for use on screen, because screen sizes vary so much.
- However, they can be used if the output medium is known, such as for print layout.

| Unit | Description |
| - | - |
| cm | centimetres |
| mm | millimetres |
| in | inches (1in = 96px = 2.54cm) |
| px | pixels (1px = 1/96th of 1in) |
| pt | points (1pt = 1/72 of 1in) |
| pc | picas (1pc = 12 pt) |

#### Limiting Width `min-width`, `max-width`

- Pages can be designed to expand and shrink to fit the users screen.
	- `min-width` specifies the smallest the box can be
	- `max-width` specifies the largest the box can be
	- This is helpful to making sure all pages are legible on all devices and screen sizes.

#### Limiting Height `min-height`, `max-height`

- It is also possible to limit the height of a CSS box using `min-height` and `max-height`.
- If content is too large for the box it can expand and look unclean.
- By using the `overflow` property, we can specify what happens to additional content when it is larger than its bounding box.

#### Overflowing Content `overflow`

- The `overflow` property tells the browser how to deal with content that expands outside of the box.
- It can have the following values:
	- `hidden` - additional content is discarded at render.
	- `visible` - default value. Content renders outside of the bounding box.
	- `scroll` - add a scroll bar to the box to allow additional content to be seen.
	- `clip` - similar to hidden, but forbids all types of scrolling.

### Box Model

![](Pasted%20image%2020231102132048.png)

- Every box has 3 available properties
	- `border` - If visible, the width of the border
	- `margin` - space between this and adjacent boxes
	- `padding` - space between border and content

#### Border

- The `border` property allows us to specify width, style and colour in one line ( in that order )

```css
p {
	width: 250px;
	border: 3px dotted red;
}
```

##### Border Width `border-width`

- Can be defined as `thick` `medium` or `thin`, but usually in pixels.
- Can also control the 4 borders individually:
	- `border-top-width: 2px;`
	- `border-right-width: 1px;`
	- etc..
- Or by setting 4 values of `border-width`
	- `border-width: 2px, 1px, 1px, 2px;`
	- `border-width: top right bottom left;`

##### Border Style `border-style`

- Controls the style of the border
	- Accepts: `solid` `dotted` `dashed` `double` `groove` `ridge` `inset` `outset` `hidden` `none`.
- Can also set style of the borders individually:
	- `border-top-style: dotted;`
	- `border-right-style: ridge;`
	- etc..

##### Border Colour `border-color`

- Can be set to the hard-coded CSS colour values, RGBA, HSLA, etc..
	- `border-color: darkcyan;`
- Can be set individually using the same scheme as previous.

#### Padding

- The `padding` property allows us to shorthand set the values for all 4 padding properties in one line

```css
	padding: 10px 10px 5px 5px;
```

If we only specify 2 values, they will be treated as \[top/bottom] \[left/right]

#### Margin

- Similar to `padding` and `border`, we have a shorthand property called `margin`

```css
	margin: 20px 20px 25px 20px;
```

If we only specify 2 values, they will be treated as \[top/bottom] \[left/right]

#### Centering Content

- Box must have a specified width ( or it will fill the page )
- Set `left-margin` and `right-margin` to `auto`.
- Browser will set the margin to the space it could take up, equally, on each side of the box.

Note: Older browsers may need the property `text-align` set to `centre` too.