Margin collapse:
When two elements stacked on top of each other, the (vertical) margin between them is not the accumulation of two margins (the margin-bottom of an element and the margin-top of the following element). Basically, the largest of the two margins will be the distance between these adjacent elements.
Shorthand order:
Background: color, image, position, size, repeat, attachment, position. Note: when using shorthand syntax, the background-size property has to come after background-position property and separated with "/” , e.g. background: url('path/to/image.png') 50% 50%/cover no-repeat;
If background-size shows two unspecified numbers like background-size: 100px 80px;, the first one is the left and the second one is the top.
Border: width, style, color.
Example: border: 5px solid red;
Transition: transition-property, transition-duration, transition-timing-function, delay.
Example: transition: width 2s ease-in 1s;
Animation: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction.
Example: animation: myanimation 5s linear 2s infinite alternate;
Inheritable attributes: font properties, text properties, line-height, color, border-collapse and border-spacing (that means you can set these in the Table, and every element inside of it will inherit them). See details here.
Non-inheritable attributes: padding, margin, width, height, background properties, border properties (except those two mentioned above).
Add the rules below to make sure the width of all elements inside the body includes their respective padding, margin and border-size properties. The second rule is to allow the descendants of an element which uses a different box-sizing (if necessary) to not being overridden by the html rule. More on CSS reset here.
html {
box-sizing: border-box;
}*, *:before, *:after {
box-sizing: inherit;
}
Use em or rem for font-size or icon. These two relative length units are based on the font-size of other elements, they are more practical to use than units that are relative to viewports. em is relative to its inherited font-size. rem is relative to the font-size of the root element. 2em means 2 x the font-size of its direct or nearest element.
Put overflow: auto; on a container so that child elements don’t overflow.
Importance overrules specificity. Specificity beats source order.
The order of specificity (from the highest) is id → attribute selector → class → element selector
Setting offset properties (top, bottom, left, right) on an element will move it relative to its containing element (a.k.a the parent). top: 10px means “move it 10px from the top border of the parent”
Position an element by combining offset properties with transform: translate(x value, y value) A typical use case is centering an element. Below is the step by step process:
.parent {
position: relative;
width: 500px;
height: 300px;},.child {
position: absolute;
top: 50%;
left: 50%;
}
With the CSS rules above, the child element will be moved down by 250px (which is50% of 500px) and to the right by 150px (which is 50% of 300px). At this point, the top left corner of the child element is positioned at the center of the parent element.
If you want to move the child element such that its center is right at the center of the parent element, like so:
Then you will need to add a transform rule below. Note: negative values will move the element up and to the left; positive values will be the opposite (down and to the right).
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}The difference between the values of offset properties and translate is what they are referring to. top, bottom, left, right refer to the parent’s width and height. Whereas transform: translate(x, y) refers to its own width and height (it has nothing to do with the parent)
static is the default position of an element. Setting the position of an element to relative means “it is relative to its default position”. If there are no offset properties used (top, bottom, left, right), then positioning an element to relative will not move it anywhere.
There are two situations where setting an element to relative without offset properties is useful:
1. If we need to set the z-index (because it is not possible to change the depth of an element on static positioned element — it works on absolute positioned element though), or…
2. When we want to position a child element to absolute. Because absolute positioned element means “it is relative to its closest positioned parent”, instead of relative to its default position (static). The closest parent itself can be positioned with relative or absolute.
Common block elements:
<article><aside><blockquote><canvas><div><fieldset><figure><footer><form><h1>-<h6><header><hr><li><main><nav><noscript><ol><ul><p><section><table><tfoot><dl><dt><video>
Common inline elements:
<a><br><button><em><i><img><input><label><script><select><small><span><strong><textarea><tt>
Center a block element inside a container by using max-width (not just width — to avoid a horizontal sidebar on devices smaller than the width set) and margin: auto; The reason we need the width is because the box model of a block element by default takes up the entire block inherited from the parent. If we want to have the element centered relative to its parent, then we need to “reduce” the box model’s width so that it’s smaller than the width of its parent. For example: if the parent’s width is 400px, then the child block element should have its width set to less than 400px. The difference between them will be the available ‘wiggle room’ for the to-be-centered element.
Center a text element inside a block by setting the top and the bottom padding plus addtext-align: center;.
Align an inline element with vertical-align: middle;. Other values are documented here. Mostly used for anchor, button, input, img, span elements. Gotcha: this rule incorporates the baseline of an element and also its parent that it will be aligned with. But replaced elements don’t have their baselines specified in HTML specification, so usingvertical-align on them may result in different appearance between browsers.
The difference between display: inline-block and display:inline
is that the first one allows you to set thewidth, height ,margin-top , margin-bottom, padding-top, padding-bottom. Useinline-block when you want to customize the box model of an element but still have adjacent elements.
inline element or any element withdisplay:inline; can’t have its width and height customized in CSS. Setting the top and bottom of your margin won’t do anything. The padding-top, padding-bottom will work but they are not respected by elements above/below them — that means they may cause the element to overlap other elements. However, they honor vertical-align property.
display:none; removes an element from the DOM. visibility: hidden; hides it visually but the element is still in the flow, taking up an invisible space.
Pseudo class is a way to indicate the state of an element. Pseudo element is to modify a specific element or just a part of it, e.g. ::before, ::after, ::selection. Keep in mind that ::first-letter, ::first-line only work for block elements (p, h1-h6, div, etc). So they don’t work on even inline elements that may contain text like span, text-area, i, a, cite.
To prevent override, the order for anchor tag’s pseudo classes have to be:
unvisited (a:link) → visited (a:visited) → mouse over (a:hover) → selected (a:active)
