All HTML elements are boxes. Every element on your web page is treated as a box (with an invisible boundary around each element). These boxes can be nested, stacked on top of each other depending on their properties.
Every element on a web page is a rectangular box. The display property in CSS determines just how that rectangular box behaves.
div {
display: inline; /* Default of all elements, unless UA stylesheet overrides */
display: inline-block; /* Characteristics of block, but sits on a line */
display: block; /* UA stylesheet makes things like <div> and <section> block */
display: run-in; /* Not particularly well supported or common */
display: none; /* Hide */
}The default value for elements. Think of elements like <span>, <em>, or <b> and how wrapping text in those elements within a string of text doesn’t break the flow of the text.
NOTE An inline element will not accept height and width. It will just ignore it. An inline element will accept margin and padding but only horizontally, not vertically.
An element set to inline-block is very similar to inline in that it will set inline with the natural flow of text (on the “baseline”). The difference is that you are able to set a width and height which will be respected.
A number of elements are set to block by the browser UA stylesheet. They are usually container elements, like <div>, <section>, and <ul>. Also text “blocks” like <p> and <h1>. Block level elements do not sit inline but break past them. By default (without setting a width) they take up as much horizontal space as they can.
A positioned element is an element whose computed position value is either relative, absolute, fixed, or sticky. (In other words, it's anything except static.)
The default position value of any box. This results in the box being laid out in normal flow and the properties of top, bottom, left and right (also known as box offset values) will have no effect because the box is considered not positioned.
The top and bottom properties specify the vertical offset from its normal position; the left and right properties specify the horizontal offset.
The box will initially be laid out according to normal flow, then depending on the aforementioned box offset values, will be offset relative to its normal position.
An absolutely positioned element is an element whose computed position value is absolute or fixed. An absolutely positioned box is explicitly offset with respect to its containing block, and the box does not participate in the normal flow at all. Its later siblings will not know about its existence in the greater layout.
A sticky positioned box works similarly to that of a relatively positioned box. The difference is that the offset is computed to the nearest ancestor with a scrolling box, or the viewport if no such ancestor exists.
Note Scrolling elements containing fixed or sticky content can cause performance and accessibility issues.
Floated elements remain a part of the flow of the web page. This is distinctly different than page elements that use absolute positioning. Absolutely positioned page elements are removed from the flow of the webpage, like when the text box in the print layout was told to ignore the page wrap.
Floats can be used to create entire web layouts.
NOTE While floats can still be used for layout, these days, we have much stronger tools for creating layouts on web pages. Namely, Flexbox and Grid.
Float’s sister property is clear. An element that has the clear property set on it will not move up adjacent to the float like the float desires but will move down past the float.
#footer { clear: both; }
Clear has four valid values as well. Both are most commonly used, which clear floats coming from either direction. Left and Right can be used to only clear the float from one direction respectively.
One of the more bewildering things about working with floats is how they can affect the element that contains them (their “parent” element). If this parent element contained nothing but floated elements, its height would literally collapse to nothing.
Note Be careful with float. It can be difficult to debug errors.
The z-index property can be specified with an integer value (positive, zero, or negative), which represents the position of the element along the z-axis.
NOTE When no z-index property is specified, elements are rendered on the default rendering layer 0 (zero).
If several elements share the same z-index value (i.e., they are placed on the same layer), stacking rules explained like this
The background and borders of the root element
Descendant non-positioned blocks, in order of appearance in the HTML
Descendant positioned elements, in order of appearance in the HTML
The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.
/* Keyword values */
transform: none;
/* Function values */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);
/* Global values */
transform: inherit;
transform: initial;
transform: unset;Control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time.
When you purchase web fonts licensing, you receive a package of font files that typically include at least some of the following formats:
Embedded OpenType (EOT): is a legacy format developed by Microsoft. Ignore this if you don't want to support old IE browsers.
TrueType (TTF): is a font format developed by Microsoft and Apple in the 1980s. Ignore it if you don't want to support old browsers.
Web Open Font Format (WOFF): was developed in 2009 as a wrapper format for TrueType and OpenType fonts. It compresses the files and is supported by all modern browsers.
Web Open Font Format 2 (WOFF2): is an update to the original format. Developed by Google, this is considered the best format of the bunch because it offers smaller file sizes and better performance for modern browsers that support it.
There are two settings inside font files that define the space between characters:
Letter spacing: This is defined as side bearings on the left and right sides of each character.
Font kerning: This refers to specific adjustments between two characters
Spacing cannot be turned off at all. Kerning, on the other hand, is turned off by default in browsers and has to be turned on by you in your CSS.
p {
font-feature-settings: "kern" 1;
font-kerning: normal;
}When using a custom font via @font-face, browsers used to display a fallback font in the font stack until the custom one loaded.
Recently, browsers started to detect if the text was set in a custom font that hasn’t loaded yet, and made it invisible until the font did load (or X seconds had passed). This behavior can lead to permanently invisible content.
