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