By

Contents
  1. 1. Basics
    1. 1.1. Types of Boxes
  2. 2. Height and Width
    1. 2.1. Width
    2. 2.2. Height
  3. 3. Align
    1. 3.1. Horizontal Align
    2. 3.2. Vertical Align
  4. 4. Layout
    1. 4.1. Multiple div in one line
    2. 4.2. Dynamic Layout
  5. 5. Break Word
  6. 6. Common CSS
    1. 6.1. first-of-type and first-child
  7. 7. Classic Layout
  8. 8. Common class name
  9. 9. References

Basics

Types of Boxes

CSS display types (types of boxes):

  • block
  • inline
  • inline-block.

Block elements

  • Always starts on a new line, and fills up the horizontal space left and right on the web page.
  • Can have height and width.
  • You can add margins and padding on all four sides of any block element — top, right, left, and bottom.

Inline elements

  • Don’t start on a new line.
  • Can’t have height and width.
  • Only add space to the left or right margin and padding. Can’t add height to top or bottom margin and padding.

Inline-Block elements

  • Don’t start on a new line.
  • Can have height and width.
  • Can padding and margins added on all four sides.

Height and Width

Width

  • 宽度一般不设置，用内容本身去撑（动态宽度）。也可以设置固定的宽度，使用百分比宽度。
  • 用 padding/margin left/right 百分比，去设置两个元素之间的水平间距。

Height

  • 高度一般也不设置，用内容本身撑（动态高度）。
  • 使用 padding/margin top/bottom 固定值，去增加高度。

Align

Horizontal Align

horizontally center div

horizontally center block elements

  1. Center div horizontally - using margin auto in inner elements
1
2
3
#my-item {
    margin: auto;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style type="text/css">
    #outerDiv {
        background-color: darkgray;
        height: 300px;
        width: 80%;
    }
    #innerDiv {
        background-color: green;
        width: 200px;
        height: 200px;
        margin: auto;
    }
</style>

<div id="outerDiv">
    <div id="innerDiv">abc</div>
</div>
  1. Center div horizontally - using flexbox in the outer element
1
2
3
4
5
#my-box {
    display:flex;
    flex-direction:row;
    justify-content:center;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style type="text/css">
    #outerDiv {
        background-color: darkgray;
        height: 800px;
        width: 1000px;
        display:flex;
        flex-direction:row;
        justify-content:center;

    }
    #innerDiv {
        background-color: green;
        width: 200px;
        height: 200px;
    }
</style>
<div id="outerDiv">
    <div id="innerDiv">abc</div>
</div>

horizontally center text

  1. Center text vertically - using text align
1
2
3
#my-div {
    text-align: center;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style type="text/css">
    #outerDiv {
        background-color: darkgray;
        height: 300px;
        width: 80%;
    }
    #innerDiv {
        background-color: green;
        width: 200px;
        height: 200px;
        text-align: center;
    }
</style>
<div id="outerDiv">
    <div id="innerDiv">abc</div>
</div>

Left and right align

Left and right align - Using position

1
2
position: absolute;
right: 0px;

Left and right align - Using float

1
float: right;

Some items left align some right

1
2
3
4
5
6
<div class="container">
    <div class="left-item"></div>
    <div class="left-item"></div>
    <div class="right-item"></div>
    <div class="right-item"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
.container {
    overflow:hidden;
}
.container .left-item {
    float: left;
    margin-right: 10px;
}
.container .right-item {
    float: right;
    margin-left: 10px;
}

Note: If an element is taller than the element containing it, and it is floated, it will overflow outside of its container. You can use the “clearfix“ hack to fix this. We can add overflow: auto; to the containing element to fix this problem

Vertical Align

Vertically center div

  1. Center vertically - using flexbox

flex-direction：

  • row(default, from left to right)
  • row-reverse
  • column (from top to bottom)
  • column-reverse

justify-content: the direction is the same with flex-direction.

align-items: the direction is across with flex-direction.

1
2
3
4
5
#my-box {
    display:flex;
    flex-direction:row;
    align-items:center;
}
1
2
3
4
5
#my-box {
    display:flex;
    flex-direction:column;
    justify-content:center;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style type="text/css">
    #outerDiv {
        background-color: darkgray;
        height: 800px;
        width: 1000px;
        display:flex;
        flex-direction:row;
        align-items:center;
    }
    #innerDiv {
        background-color: green;
        width: 200px;
        height: 200px;
    }
</style>

<div id="outerDiv">
    <div id="innerDiv">abc</div>
    <div id="innerDiv2">123</div>
</div>

Vertically center text

  1. Center a single line text vertically - using line-height and height
1
2
3
4
#myDiv {
    height: 150px;
    line-height: 150px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style type="text/css">
    #outerDiv {
        background-color: darkgray;
        height: 800px;
        width: 1000px;
    }
    #innerDiv {
        background-color: green;
        width: 200px;
        height: 150px;
        line-height: 150px;
    }
</style>

<div id="outerDiv">
    <div id="innerDiv">abc</div>
</div>
  1. Center multiple lines text vertically - using vertical-align:center and display: table-cell
1
2
3
4
#innerDiv {
    display:table-cell;
    vertical-align:middle;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style type="text/css">
    #outerDiv {
        background-color: darkgray;
        height: 800px;
        width: 1000px;
    }
    #innerDiv {
        background-color: green;
        height:400px;
        width:150px;
        display:table-cell;
        vertical-align:middle;
    }
</style>
<div id="outerDiv">
    <div id="innerDiv">this is multiple lines. this is multiple lines. this is multiple lines. this is multiple lines. this is multiple lines. this is multiple lines. this is multiple lines. </div>
</div>
  1. Center text vertically - using padding in **no height a div **
1
2
padding-top: 50px;
padding-bottom: 50px;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style type="text/css">
    #outerDiv {
        background-color: darkgray;
        height: 800px;
        width: 1000px;
    }
    #innerDiv {
        background-color: green;
        width: 200px;
        padding-top: 100px;
        padding-bottom: 100px;
    }
</style>

<div id="outerDiv">
    <div id="innerDiv">abc</div>
</div>
  1. Center text vertically - using flex
1
2
3
4
5
#my-div {
    display:flex;
    flex-direction:row;
    align-items:center;  
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style type="text/css">
    #outerDiv {
        background-color: darkgray;
        height: 800px;
        width: 1000px;
    }
    #innerDiv {
        background-color: green;
        width: 200px;
        height: 200px;
        display:flex;
        flex-direction:row;
        align-items:center;
    }
</style>

<div id="outerDiv">
    <div id="innerDiv">abc</div>
</div>

Center vertically - using position & transform

Layout

Multiple div in one line

1
float:left (or right);
1
display:inline-block;
1
display:flex;

Dynamic Layout

Inline elements in a block element auto wrapping lines until decrease to the block minimal width:

1
min-width: {fixed_value}

Break Word

  • word-break: normal; // newline for words
  • word-break: break-all; // newline for characters
  • word-break: keep-all; // don’t newline
  • word-break: break-word; // newline for words, if a single word over the block width then newline for character. Deprecated. Using word-break: normal and overflow-wrap: anywhere replace word-break: break-word.

Common CSS

first-of-type and first-child

  • xxx:first-of-type: match the first of selector occur from a parent.
  • xxx:nth-of-type(1)
  • xxx:last-of-type
  • xxx:nth-last-of-type(1)
  • xxx:first-child : match when the first of child of a parent is the selector.
  • xxx:nth-child(1)
1
2
3
4
5
6
7
8
9
10
11
<div class="column">
    <div class="row">I am .row:first-of-child.</div> 
    <div class="row">this is a lines. </div>
    <div class="row">this is a lines. </div>
</div>
<div class="column">
    <p>I am p:first-of-child</p>    
    <div class="row">I am .row:first-of-type not .row:first-of-child.</div>
    <div class="row">this is a lines. </div>
    <div class="row">this is a lines. </div>
</div>

Classic Layout

Multiple columns align left using display: flex;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<style type="text/css">
    #content {
        display: flex;
        flex-direction: row;
    }
    .column {
        background-color: darkgray;
        padding: 20px 20px 20px 0px;
    }
    .column:first-of-type {
        padding-left: 20px
    }
    .row {
        background-color: green;
        height: 30px;
        margin-top: 10px;
    }
    .row:first-of-type {
        margin-top: 0px;
        font-weight: bold;
    }
</style>

<div id="content">
    <div class="column">
        <div class="row">this is multiple lines. </div>
        <div class="row">this is multiple lines. </div>
        <div class="row">this is multiple lines. </div>
    </div>
    <div class="column">
        <div class="row">this is multiple lines. </div>
        <div class="row">this is multiple lines. </div>
        <div class="row">this is multiple lines. </div>
    </div>
    <div class="column">
        <div class="row">this is multiple lines. </div>
        <div class="row">this is multiple lines. </div>
        <div class="row">this is multiple lines. </div>
    </div>
</div>

Multiple columns align left and one column align right using display: flex; and margin-left: auto;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<style type="text/css">
    #content {
        background-color: darkgray;
        width: 100%;
        display: flex;
        flex-direction: row;
    }
    .column {
        background-color: orange;
        padding: 20px 20px 20px 0px;
    }
    .column:first-of-type {
        padding-left: 20px
    }
    .column:nth-last-of-type(1)  {
        background-color: red;
        margin-left: auto;
    }
    .row {
        background-color: green;
        height: 30px;
        margin-top: 10px;
    }
    .row:first-of-type {
        margin-top: 0px;
        font-weight: bold;
    }
</style>

<div id="content">
    <div class="column">
        <div class="row">this is multiple lines. </div>
        <div class="row">this is multiple lines. </div>
        <div class="row">this is multiple lines. </div>
    </div>
    <div class="column">
        <div class="row">this is multiple lines. </div>
        <div class="row">this is multiple lines. </div>
        <div class="row">this is multiple lines. </div>
    </div>
    <div class="column">
        <div class="row">this is multiple lines. </div>
        <div class="row">this is multiple lines. </div>
        <div class="row">this is multiple lines. </div>
    </div>
</div>

columns have two directions, some from align left, others align right, using flex-direction: row and flex-direction: row-reverse;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<style type="text/css">
    #content {
        background-color: darkgray;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    #section1 {
        display: flex;
        flex-direction: row;
    }
    #section2 {
        display: flex;
        flex-direction: row-reverse;
    }
    .column {
        background-color: orange;
        padding: 20px 20px 20px 0px;
    }
    .column:first-of-type {
        padding-left: 20px
    }
    .column:nth-last-of-type(1)  {
        background-color: red;
    }
    .row {
        background-color: green;
        height: 30px;
        margin-top: 10px;
    }
    .row:first-of-type {
        margin-top: 0px;
        font-weight: bold;
    }
</style>

<div id="content">
    <div id="section1">
        <div class="column">
            <div class="row">this is multiple lines. </div>
            <div class="row">this is multiple lines. </div>
            <div class="row">this is multiple lines. </div>
        </div>
        <div class="column">
            <div class="row">this is multiple lines. </div>
            <div class="row">this is multiple lines. </div>
            <div class="row">this is multiple lines. </div>
        </div>
    </div>
    <div id="section2">
        <div class="column">
            <div class="row">this is multiple lines. </div>
            <div class="row">this is multiple lines. </div>
            <div class="row">this is multiple lines. </div>
        </div>
        <div class="column">
            <div class="row">this is multiple lines. </div>
            <div class="row">this is multiple lines. </div>
            <div class="row">this is multiple lines. </div>
        </div>
    </div>
</div>

Common class name

  • row
  • column
  • title
  • content
  • item
  • wrapper
  • menu-bar
  • top, header, footer
  • logo

References

[1] CSS display properties: block, inline, and inline-block — & how to tell the difference

[2] CSS Layout - Horizontal & Vertical Align - w3schools

[3] Aligning Items in a Flex Container

Contents
  1. 1. Basics
    1. 1.1. Types of Boxes
  2. 2. Height and Width
    1. 2.1. Width
    2. 2.2. Height
  3. 3. Align
    1. 3.1. Horizontal Align
    2. 3.2. Vertical Align
  4. 4. Layout
    1. 4.1. Multiple div in one line
    2. 4.2. Dynamic Layout
  5. 5. Break Word
  6. 6. Common CSS
    1. 6.1. first-of-type and first-child
  7. 7. Classic Layout
  8. 8. Common class name
  9. 9. References