CSS Review

1. What is the basic but key contents?

Color? Animation? No, it’s position.

There are hundreds of properties and values in CSS, it is not necessary to remember them all. This is a fast pace century, probably some developers know how to use React, Angular or Vue and some flux tricks, but they may not familiar with basic CSS, while it is good to use some UI frameworks like MaterialUI or AntUI or Bootstrap, but do know how to layout with original CSS, it will be helpful one day. 🙂

“Why these <div>s just won’t align in one line!? Do they hate me?” “I just want to move my little div 10px to the right, I’ve give it a ‘left: 10px’, why it doesn’t move?

Have you ever encountered similar problems like above, then I hope this review will help you.



2. Three basic html element types.

  • Block: Each block element occupies an entire line or row of the window, no matter the width of that block.
  • Inline: Inline elements share one line if the sum of their widths is less than the width of the window, or the exceeded inline elements will start a new line. Inline element cannot set width, height, line-height, top & bottom padding, top & bottom margin, its width are decided by its contents, like the length of its text. Next time, don’t try to set height or width to a <span> or <a> unless you change its type using ‘display: block’ or ‘display: inline-block’.
  • Inline-block: Inline-block elements also share one line like inline elements do, the difference is inline-block element is allowed to set width and height. <img> and <input> are inline-block elements by default.


3. How to change letter space & word space?

1
2
3
p {
    letter-spacing: 5px;
}

This is how the letter-spacing works

1
2
3
p {
    word-spacing: 20px;
}

This is how the word-spacing works



4. How to set text inside a block element vertical & horizontal center?

Horizontal center for text inside block element is easy:

1
2
3
div {
    text-align: center;
}

vertical center can be achieved by setting line-height the same with block element height:

1
2
3
4
div {
    height: 100px;
    line-height: 100px;
}


5. How to give first line indention?

1
2
3
4
div {
    /* Remember this could only be used on block element. */
    text-indent: 2em;
}


6. Oh…the extra white space and returns in my paragraph are disappeared.

The CSS property “white-space” has 7 values:

  • normal (default): ignore extra white spaces and all returns.
  • pre: preserve extra white spaces and all returns.


7 . Box Model



8. How to set a block element horizontal center in its parent element?

1
2
3
#childDiv {
    margin: 0 auto;
}


9. Margin collapse

Two block elements, the bottom margin of the above element will collapse with the top margin of the underneath element, the merged margin size is the same with the larger one.

1
2
3
4
5
6
7
#aboveDiv {
    margin: 20px;
}
#underneathDiv {
    margin: 10px;
}
/* After margin collapse, the margin between them is 20px. */

Remember this rule is not applied on left and right margin.



10. DOM normal flow

Elements by default align left➡️right (for inline and inline-block) and then top⬇️bottom (for all types of elements).



11. Float

  • Float elements escape from DOM normal flow.
  • Float is to its parent element, not to window.
  • Float element will be floating after elements in normal flow defined before it:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#div1 {
    height: 50px;
    width: 50px;
    background: red;
    opacity: 0.4;
}
#div2 {
    float: left;
    height: 100px;
    width: 100px;
    background: green;
    opacity: 0.4;
}
#div3 {
    height: 150px;
    width: 150px;
    background: blue;
    opacity: 0.4;
}
#div1
#div2
#div3
  • Float elements will not affect elements in normal flow, but it does affect the text in normal flow, So it can achieve a text wrapping effect:
Floating…
Float elements will not affect elements in normal flow, but it does affect the text in normal flow, So it can achieve a text wrapping effect


12. What is parent element’s height collapse?

if the parent height hasn’t been preset, then parent height will collapse to 0px after all its child elements floating, why this happens? Because child elements escape from normal flow, consider the parent element now has nothing inside, of course its height will be 0px.

Solution? Yes, give the parent element a CSS property “overflow: hidden”



13. Why and How to clear float?

Why? I don’t want my afterward elements being covered by my previous float elements.

How? There are three popular solutions:

1⃣️ Use CSS property “clear”:

1
2
3
4
5
6
#afterwardEl {
    /* Pick one below as needed */
    clear: left; /* Clear left float */
    clear: right; /* Clear right float */
    clear: both; /* Clear left and right float */
}

2⃣️ Use what we learnt from previous section 12, give a parent to those float elements, and give the parent “overflow: hidden”.

3⃣️ Copy and paste below style into the parent of those float elements:

1
2
3
4
5
6
7
8
9
10
.parentEl::before, .parentEl::after {
    content: " ";
    display: table;
}
.parentEl::after {
    clear: both;
}
.parentEl {
    zoom: 1;
}


14. Property “position”

There are four types of position in CSS:

  • static (default): you cannot set something like “left: 10px;” or “top: 35px;” for element in static position.
  • relative: relative position to current position, say if you give it a “left: 10px;”, it will move 10px to right.
  • absolute: consider this as a special float, because it will also escape from normal flow, the difference is “position: absolute” is floating by using “left, top, right, bottom”, and it will not affect text like “float” does.
  • fixed: position is fixed to window, for example, if you scroll down your page, the fixed element will stay at the same position in your window.


15. z-index in parent and child situation.

May 30, 2019 I took a frontend test, see this:

The Cart button is parent element and the Cart detail is child element, To achieve this effect, what will you do? Right, set the parent’s bottom border to white color and use it to cover the child’s top border. But later I found no matter how high the z-index in parent, child would always cover the parent. I still don’t know the mechanism, however there is solution: Set child’s z-index to -1, and do not give the parent z-index property, done. But if you do this, other elements will have a race of z-index minus value😓.

Leave a Reply

Your email address will not be published. Required fields are marked *