1.2.1: Layout
- 1.CSS layout is about organising HTML elements into nested boxes and determining their positions
- 2.CSS box model determines the size of each element on screen
- 3.CSS
displayproperty controls the manner in which elements appear on screen, e.g. in horizontal or vertical order - 4.CSS
positionproperty allows us to position elements outside of the normal document flow, e.g. a fixed navbar or chat window - 5.Flexbox allows simple and robust layout of collections of HTML elements
Organise HTML elements into conceptual boxes before planning how to use CSS for layout. Source: W3Schools
When determining how to layout elements with CSS, first organise elements into nested boxes, then determine which CSS styles need to apply to which boxes. By default browsers will render all HTML elements in a single vertical column.
Margin is spacing outside the content's border. Padding is spacing inside the content's border. Source: W3Schools
The CSS box model controls how much space an element takes on screen with CSS properties such as content
width, content height, margin (area outside border), border (area surrounding content) and padding (area inside border but outside content). While helpful for controlling exact size of HTML elements, we recommend using flexbox properties (covered in later submodule) to layout HTML elements for a more robust layout.1) Pixel count
Only works for block display elements. Generally less recommended because difficult to create responsive (mobile and desktop-friendly) layouts with fixed pixel sizes.
p {
width: 100px;
height: 100px;
}
2) Percent of parent container
Percentage is relative to the parent container, allows responsive sizing. Percentage height does not work unless parent has fixed size.
p {
width: 50%;
height: 100px;
}
3) Percent of viewport (window)
Viewport sizing allows for most responsive sizing based on screen size, but needs to be coordinated with other elements on screen since sizing is not relative to other elements.
p {
width: 100vw;
height: 100vh;
}
Chrome helps us visualise CSS box properties of every element on every page at the bottom of the Styles window in the Elements tab in Chrome DevTools. To see box properties of any HTML element, right click the element and click "Inspect". Box properties in the box visualisation should match the most-specific box properties at the top of the CSS styles list (ordered in decreasing specificity).
Chrome DevTools helps us visualise box properties of every HTML element on screen
Apply
box-sizing CSS property to include padding and border in box sizeCSS does not include padding and border in box size by default. In the following example, CSS produces a box 300px wide (including 50px of padding on both sides), even though we specify width of 200px.
p {
width: 200px;
padding: 50px;
}
To make
width and height include padding and border space, apply the box-sizing CSS property to all elements.* {
box-sizing: border-box;
}
The CSS
display property controls the way target elements render on screen. The 2 most basic display values are block (full screen width) and inline (width of element only). By default, every HTML element has either block or inline layout.inline-block is a 3rd display property that enables inline elements with block properties such as spacing on all sides. inline elements cannot have custom spacing around them.
block, inline and inline-block are the most basic CSS display values. Source: Stack Overflow
The
margin property's auto value allows us to automatically set left and right margins to centre an element on screen. inline elements cannot be centred because inline elements cannot have margin settings..main {
margin: 0 auto; /* 0 top and bottom margin, auto left and right margin */
}
We may also want to constraint element width to prevent content from becoming hard to read across the full width of a horizontal screen. We will look at fixed, percent and max width layout to do this. Width settings do not apply to
inline elements.Fixed-Width Layout
Fixed-width layout fixes the width of the target element, regardless of how small or large the screen size is. This works for large screen sizes but may look poor on small screen sizes.
.main {
width: 600px; /* 600px is reasonable default width of centre column */
margin: 0 auto; /* 0 top and bottom margin, auto left and right margin */
}
Percent-Width Layout
Percent-width layout fixes width to be a percentage of screen width. This makes our content responsive but may not be what we want, especially if we want layout to be different across mobile and desktop.
.main {
width: 80%;
margin: 0 auto; /* 0 top and bottom margin, auto left and right margin */
}
Max-Width Layout
Max-width layout allows our element to occupy 100% of screen width at smaller screen sizes but only a specified width at larger screen sizes. This helps when we wish to maximise screen real estate on mobile devices but not make content too wide on desktop devices.
.main {
max-width: 600px; /* be 100% width, until 600px */
margin: 0 auto; /* 0 top and bottom margin, auto left and right margin */
}
The CSS
position property allows us to position HTML elements outside the normal "flow" of an HTML document. We can use position: fixed to fix a navbar to the top of a screen even when we scroll down; We can use position: absolute to position a counter at the top right corner of a notification icon. Position offset properties
top, right, bottom, left set the relevant offset from the element's position. We can use any CSS unit to express offset.p {
top: 300px; /* Offset p elements by 300px from the top of where they would be */
}
There are 5
position property values: static, relative, fixed, absolute and sticky. static is the default property for all elements with no explicit position value. relative is relative to where the element would have otherwise been. fixed is a fixed position on screen regardless of where the user scrolls. absolute is relative to the closest explicitly-positioned ancestor element. sticky is a combination of relative and fixed. Read more about each value and how to use them at W3Schools.z-indexWhen playing with
position values its possible we will have elements in front of and behind each other on screen. By default the overlapping element mentioned last in the HTML document will be in front. To alter elements' relative forward and backward positions on screen, use the CSS z-index property. Flexbox allows simple and robust layout of collections of HTML elements. Without specifying specific distances or percentages, flexbox allows us to position elements in vertical or horizontal order, at the start, middle or end of their container, grouped together or spaced evenly apart, with or without specific ratios between elements.
To use flexbox we need to set "flex properties" on both containers of the elements we wish to position and and the elements themselves. The containers are known as "flex containers" and the elements they contain are known as "flex items".
- 1.
- 2.
- 3.
- 4.
- 5.
Last modified 1yr ago