CSS Layout

CSS Layout

八月 31, 2020

Dark Mode

Layout

Background Property

Case 1:

1
2
3
4
5
6
7
8
9
10
11
<style>
#bg {
width:500px;
height: 500px;
background-color: blue;
background-image: url(); /*back ground use image*/
background-repeat: no-repeat; /* only show once */
background-position: right;/* the other dimension will be set to center by default */

}
</style>

Case 2:

1
2
3
4
5
6
7
8
9
<style>
#bg {
width: 500px;
height: 500px;
background-color: blue;
background: url() no-repeat right center; /*this actually causes background override
so no blue color in the back ground*/
}
</style>

Positioning Elements by Floating

Case1:

1
2
3
4
5
6
7
8
9
10
p{
width: 50px;
height: 50px;
border: 1px solid black;
}
#p1 {
background-color: #A52A2A;
float: right;
/* floated elements is taken out of the document flow and the margin won't collapse*/
}
1
2
3
4
5
6
7
8
9
10
11
12
13
p{
width: 50px;
height: 50px;
border: 1px solid black;
}
#p1 {
background-color: #A52A2A;
float: right;
/* floated elements is taken out of the document flow and the margin won't collapse*/
}
section {
clear: left; /*no float in the left*/
}

Case2: 2 columns layout

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
p {
width: 50% /* this means each floating elements will take up 50% of the block*/
border: 1px solid black;
float: left;
}
</style>
<div >
<p id="p1">
Lorem ipsum dolor sit amet
</p>
<p id="p2">
Beatus vir qui suffert tentationem
</p>
</div>

Relative and Absolute Positioning of Elements

Case1: Relative Positioning

1
2
3
4
5
p {
position: relative;
top: 50px;
left: 50px;
}/*its original places will be preserved and still in the document flow*/

image-20200831105608106

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
h1{
margin-bottom: 15px;
}
p {
width: 50px;
height: 50px;
border: 1px solid black;
margin-bottom: 15px;
}
#p1{
background-color: maroon;
position: relative;
top: 65 px;
left: 65 px;
}
</style>

image-20200831111533056

Case2: Absolute Positioning

Find the nearest relative/absolute positioning ancestor as offset basis

The html tag by default is set to relative positioning

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
<style>
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
h1{
margin-bottom: 15px;
}
div #container {
background-color: lightblue;
}
p {
width: 50px;
height: 50px;
border: 1px solid black;
margin-bottom: 15px;
}
#p1{
background-color: maroon;
position: relative;
top: 65 px;
left: 65 px;
}
#p2{
background-color: green;

}
#p3{
background-color: blue;
position: absolute;
top: 0px;
left: 0px;
}
</style>

<div id="container">
<p id="p1"> </p>
<p id="p2"> </p>
<p id="p3"> </p>
<p id="p4"> </p>
</div>

In this case, the div tag isn’t set with positioning type, so is the body tag, so the offset basis is actually the html tag.

image-20200831112241055

To Fix

1
2
3
4
div #container {
background-color: lightblue;
position: relative;
}
Offsetting the relative container makes its content offset as well. (Flexibility)

Back to main page