Web Frontend Style Basics

Posted on 2020-11-03 Edited on 2024-11-23 In Web Frontend , HTML & CSS

Basics

Types of Boxes

CSS display types (types of boxes):

block
inline
inline-block.

	New Line	Horizontal Space	Actual Width	Height	Margin	Padding
Block elements	Always starts on a new line	Always occupy the entire horizontal space.	100% by default. You can specify width.	Height of content by default. Can specify height.	OK	OK
Inline elements	Don’t start on a new line	Width of content.	width of content by default. Can’t specify width.	Height of content by default. Can’t specify height.	Horizontal margin is OK. But vertical margin don’t work.	Horizontal padding is OK. But vertical padding don’t occupy space just overlay.
Inline-Block elements	Don’t start on a new line	Width of content by default. Or specified width.	width of content by default. You can specify width.	Same with “Block elements”	Same with “Block elements”	Same with “Block elements”

Height and Width

Width

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

Height

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

Align

Horizontal Align

Horizontally center a div

Horizontally center a div using margin auto

margin: auto;

Details

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            #outerDiv {
                background-color: darkgray;
            }
            #innerDiv {
                background-color: green;
                width: 200px;
                height: 200px;
                margin: auto;
                margin-top: 40px;
                margin-bottom: 40px;
            }
        </style>
    </head>
    <body>
    	<div>123</div>
        <div id="outerDiv">
            <div id="innerDiv">Content</div>
        </div>
        <div>123</div>
    </body>
</html>

Horizontally center a div using flexbox in the container

display:flex;
flex-direction:row; /* by default */
justify-content:center;

Details

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            #outerDiv {
                background-color: darkgray;
                display:flex;
                flex-direction:row; /* by default */
                justify-content:center;

            }
            #innerDiv {
                background-color: blue;
                width: 200px;
                height: 200px;
            }
        </style>
    </head>
    <body>
        <div id="outerDiv">
            <div id="innerDiv">Content</div>
        </div>
    </body>
</html>

Horizontally center a div using transform

/* container */
position: relative;

/* inner div */
position: absolute;  
left: 50%;
transform: translate(-50%, 0); /* or transform: translateX(-50%);*/

Details

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            #container {
                position: relative;
                height: 400px;
                background-color: lightgray;
            }

            #centeredDiv {
                position: absolute;
                left: 50%;
                transform: translate(-50%, 0);
                height: 200px;
                width: 200px;
                background-color: white;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="centeredDiv">
                Content
            </div>
        </div>
    </body>
</html>

Horizontally Center Text

Horizontally center text using text align

text-align: center;

Details

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            #myDiv {
                background-color: green;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="myDiv">Content</div>
    </body>
</html>

Horizontally center text using flex

display:flex;
flex-direction:row; /* by default */
justify-content:center;

Details

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            #myDiv {
                background-color: green;
                height: 200px;
                display:flex;
                flex-direction:row; /* by default */
                justify-content:center;
            }
        </style>
    </head>
    <body>
        <div id="myDiv">Content</div>
    </body>
</html>

Align a div to right

Align a div to right using position

position: absolute;
right: 0px;

Details

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            #outerDiv {
                background-color: darkgray;
                position: absolute;
                right: 0px;
            }
            #innerDiv {
                background-color: blue;
                width: 200px;
                height: 200px;
            }
        </style>
    </head>
    <body>
        <div id="outerDiv">
            <div id="innerDiv">Content</div>
        </div>
    </body>
</html>

Align a div to right using float

float: right;

Details

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            #outerDiv {
                background-color: darkgray;
            }
            #innerDiv {
                background-color: green;
                width: 200px;
                height: 200px;
                float: right;
            }
        </style>
    </head>
    <body>
        <div id="outerDiv">
            <div id="innerDiv">Content</div>
        </div>
    </body>
</html>

Align div to left and right

Align a div to left and right using float

<div class="container">
    <div class="left-item"></div>
    <div class="left-item"></div>
    <div class="right-item"></div>
    <div class="right-item"></div>
</div>

Details

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .container {
                height: 100px;
                background-color: gray;
                /* fixing overflow outside by adding scroll bar*/
                overflow: auto; 
            }
            .container .left-item {
                background-color: green;
                width: 20%;
                height: 200px;
                float: left;
                margin-right: 10px;
            }
            .container .right-item {
                background-color: blue;
                width: 20%;
                height: 200px;
                float: right;
                margin-left: 10px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="left-item">1</div>
            <div class="left-item">2</div>
            <div class="right-item">3</div>
            <div class="right-item">4</div>
        </div>
    </body>
</html>

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 a div

Vertically center a div using flexbox in the container

Method 1: using align-items: center

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

display:flex;
flex-direction:row; /* by default*/
align-items:center;

Method 2: using justify-content: center

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

display:flex;
flex-direction:column;
justify-content:center;

flex-direction：

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

Details

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            #outerDiv {
                background-color: darkgray;
                height: 300px;
                display:flex;
                flex-direction:row; /* by default */
                align-items:center;
            }
            #outerDiv2 {
                background-color: lightgray;
                height: 300px;
                display:flex;
                flex-direction:column;
                justify-content:center;
            }
            #innerDiv {
                background-color: green;
                width: 200px;
                height: 200px;
            }
        </style>
    </head>
    <body>
        <div id="outerDiv">
            <div id="innerDiv">Content</div>
        </div>
        <div id="outerDiv2">
            <div id="innerDiv">Content</div>
        </div>
    </body>
</html>

Vertically center a div using transform

/* container */
position: relative;

/* inner div */
position: absolute;  
top: 50%;
transform: translate(0, -50%); /* or transform: translateY(-50%);*/

Details

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            #container {
                position: relative;
                height: 400px;
                background-color: lightgray;
            }

            #centeredDiv {
                position: absolute;
                top: 50%;
                transform: translate(0, -50%);
                height: 200px;
                width: 200px;
                background-color: white;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="centeredDiv">
                Content
            </div>
        </div>
    </body>
</html>

Vertically center text

Vertically center text using line height

Only center a single line text vertically

height: 150px;
line-height: 150px;

Details

<style type="text/css">
    #myDiv {
        background-color: green;
        width: 200px;
        height: 150px;
        line-height: 150px;
    }
</style>

<div id="myDiv">Content</div>

Vertically center text using vertical-align + table-cell

Center multiple lines text vertically

#innerDiv {
    display:table-cell;
    vertical-align:middle;
}

Details

<style type="text/css">
    #myDiv {
        background-color: green;
        height:400px;
        width:150px;
        display:table-cell;
        vertical-align:middle;
    }
</style>

<div id="myDiv">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>

Vertically center text using padding

Using padding in no height a div.

padding-top: 50px;
padding-bottom: 50px;

Details

<style type="text/css">
    #myDiv {
        background-color: green;
        width: 200px;
        padding-top: 100px;
        padding-bottom: 100px;
    }
</style>

<div id="myDiv">Content</div>

Vertically center text using flex

display:flex;
flex-direction:row; /* by default */
align-items:center;

Details

<style type="text/css">
    #myDiv {
        background-color: blue;
        width: 200px;
        height: 200px;
        display:flex;
        flex-direction:row; /* by default */
        align-items:center;
    }
</style>

<div id="myDiv">Content</div>

Vertically center text by center a inner div vertically

Horizontal and vertical Align

Horizontally and vertically center a div

Using flex

display:flex;
flex-direction:row; /* by default */
justify-content:center;
align-items: center;

Details

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            #outerDiv {
            	height: 500px;
                background-color: darkgray;
                display:flex;
                flex-direction:row; /* by default */
                justify-content:center;
                align-items: center;
            }
            #innerDiv {
                background-color: blue;
                width: 200px;
                height: 200px;
            }
        </style>
    </head>
    <body>
        <div id="outerDiv">
            <div id="innerDiv">Content</div>
        </div>
    </body>
</html>

Using transform

/* container */
position: relative;

/* inner div */
position: absolute;  
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

Details

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            #container {
                position: relative;
                height: 400px;
                background-color: lightgray;
            }

            #centeredDiv {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                height: 200px;
                width: 200px;
                background-color: white;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="centeredDiv">
                Content
            </div>
        </div>
    </body>
</html>

Horizontally and vertically center text

Using flex

display:flex;
flex-direction:row; /* by default */
justify-content:center;
align-items: center;

Details

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            #myDiv {
                background-color: green;
                height: 200px;
                display:flex;
                flex-direction:row; /* by default */
                justify-content:center;
                align-items: center;
            }
        </style>
    </head>
    <body>
        <div id="myDiv">Content</div>
    </body>
</html>

Layout

Multiple div in one line

float:left (or right);

display:inline-block;

display:flex;

Dynamic Layout

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

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)

<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;

<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;

<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;

<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