UI layout defines the general structure of the document. It is laid out by the browser through following many different rules that can be customized.
Block elements
Block elements prevent other elements from being on the same horizontal line. Block elements occupy the complete horizontal lines no matter how small their content actually is. It gives the impression of a "line return". Headings are block elements because we don't want them to share their line with another element. The same goes for paragraphs. By default, the width of a block element is equal to 100% of its container. As such, it fills up the entire horizontal line. When the width of the block is less than 100%, it will still "reserve" the whole line for itself. As such, a block element with 10% width will still "occupy" the whole line, but its content will only fill 10% of the horizontal line.
Inline elements
On the other hand, Inline elements only take up as much space as how big they are. An inline element won't create a line return at its end. As such, different Inline elements will stack up on the same horizontal line until they fill it up. For example, we want an inline link to be on the same line as the text he is nested in. We also want the navigation bar navigation links to share the same line.
Inline elements cannot have an arbitrary size, as their size is determined by their content. As such, we cannot set the width or height of inline elements, such as links or images. If we want to set the width or height of an image or any other inline element, we must transform it to either a block or an inline block.
Inline-block elements.
Inline blocks are different from block elements as they don't "reserve" the whole line and can stack up on the same line. Inline blocks are different from inline elements as their sizing is not determined by their content, and can be set to any arbitrary size. As such, inline blocks are very customizable.
Inline block also have a specific margin behaviour. The margin of an inline block will never collapse, or "merge", with the margin of another element. As such, margins of an inline block will always add up with the margins of others elements.
Alignment
To align an element means to set the position of an element according to the position of another element. As such, alignment is a relationship between two elements.
Inline and inlined block elements can be aligned. For example, inline elements contained inside a block element can be aligned to the start, the center or the end of the container, through the "text-align" CSS property. The CSS property is set at the container level, so that every inline child, including text, can follow that alignment. In addition to simple alignments, Flex and Grid can create more sophisticated alignments. For example, elements on a same line can spread along the line with equal spacing between them. Two elements can be split up and be placed at the start and the end of the line.
Block elements on the other hand cannot be aligned because they already occupy the whole horizontal line. Even if a block has a 10% width, it can't follow any alignment set up by its parent. As such, the "text-align" property defined by a parent container won't have any effect on its child block elements. A block can still be centered through the use of "margin:auto", but it isn't an alignment.
Generally speaking, complex layouts usually require a container element. Layout rules are defined at the container level, so that it can layout its children accordingly. Both Flex and Grid use a container element on which we define either display:flex or display:grid, along with the general layout rules.
Sizing
An element has an height and a width. Those dimensions are either set explicitly or implicitly.
Most elements have an implicit size. Implicit size is determined by the element inner content. As such, they don't need an explicit size. Empty elements will have a zero size by default since a size can't be inferred.
Padding adds up space inside the element body. It makes the element bigger.
Border adds up space around the element body. It makes the element bigger.
Margin adds up space around the border. It makes the element bigger.
By default, the width and height properties will only set the element inner size, also called content size. To calculate an element total size, we need to add the padding and the border, and even the margin in some cases. This means the width and height of an element are not representative of the "real" width and height of the element.
Most of the time, this is not an issue. However, if one wants to do precise layouts with fixed size elements, and wants the size to account for both margin and padding, then one can opt-in for the border-box behaviour, rather than the content-box behaviour.
box-sizing:border-box means the width and height apply to the element at the border level: the element border is now the boundary of the element and any border or padding will grow inside the border-box rather than expanding from the content-box.
Positioning
An Element position is calculated by the browser based on the default and custom layout rules in combination with where the element stands in the DOM. As such, most elements don't need explicit positioning.
The general flow of content is left to right on the same line for inline elements, and then top to bottom for block elements. This may vary depending on the localization.
Sometimes, we want elements not to be in the flow of the document. For example, we may want a navigation bar to stick at the top of the browser window no matter how much scrolling has been done. In that case, the navigation bar is out of the main flow, and won't reserve room for itself in the main flow. As such, the element is in its own flow. This leads to some elements of different flows having the same "position". The element with a higher z-index will hide elements beneath it.
Mobile
Mobile devices in portrait mode have a small width compared to desktop or laptop devices. We can only fit one column of content as the horizontal space is very limited. On the other hand, the vertical space is virtually infinite: a user can scroll down easily. As such, mobile layout is straightforward: a 1D "bar" of content that the user will scroll through. The content occupy 100% of the horizontal space.
The traditional navigation bar is changed to a minimalist bar. It shows the name or logo of the website. It also shows the menu button which is a hamburger button. On tap, the navigation menu will open and display the navigation links. The menu will either cover the current content, or shift it out of screen with an animation. The menu has a state: it is either hidden or displayed. As such, the button usually needs to execute some javascript code in order to toggle the menu.
Mobile first means that the CSS creates a mobile UI by default. Style for desktop is provided through specific media queries that will only apply if the device has a sufficient width.
Desktop
Desktop devices are much wider than mobile devices. Content can spread horizontally, in one or many columns. The content though must keep a reasonable width, especially text. As such, columns of content should not be too large. Some websites set a maximum width for the overall content, to avoid extreme distortion due to XL screen-sizes.
In a mobile first approach, desktop styling only apply through the use of media queries. Generally speaking, desktop devices have a width greater than 600px, while mobiles cap at 450px.
@media (min-width:600px){
/* Desktop */
}
A container is used to limit the width of the overall content. The container is most often centered. Inside the container, one or many columns can be created. Columns layout is generally created with flex or grid layout. The main column displays the main content of the page.
A sidebar column can be added to provide additional information while taking advantage of the horizontal space. The sidebar is a desktop only feature. As such, it needs to be hidden on mobile, or be displayed after the main content.
Desktop devices benefit from a bigger font-size, higher-quality images, and a traditional navigation bar.