css练习一则

一道题
编写出实现如图所示页面效果的关键html代码。其中,A、B、C、D、E均为默认字号和默认字体,并且加粗显示,它们都位于各自单元格的正中间,A单元格的高度为200像素,B单元格的高度为100像素,C单元格的宽度为100像素,高度为200像素。


行高可以使用line-height与父元素等高实现

解法一:使用table

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
td {
width: 100px;
text-align: center;
}
td[height="200px"]{
line-height: 200px;

}
td[height="100px"]{
line-height: 100px;
}
</style>
<body>
<table>
<table border="1">
<tr>
<td rowspan="2" height="200px">A</td>
<td colspan="2" height="100px">B</td>
</tr>
<tr>
<td>E</td>
<td rowspan="2" height="200px">C</td>
</tr>
<tr>
<td colspan="2" height="100px">D</td>
</tr>
</table>
</body>
</html>

解法二:div浮动布局+绝对定位
这里设置了box-sizing: border-box;
border+padding+内容 = width;

关于box-sizing的说法:
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.ver {
border:1px solid #000;
width: 100px;
height: 200px;
float: left;
text-align: center;
line-height: 200px;
box-sizing: border-box;
}
.level {
border:1px solid #000;
width: 200px;
height: 100px;
float: left;
text-align: center;
line-height: 100px;
clear: right;
box-sizing: border-box;
}
.square{
border:1px solid #000;
width: 100px;
height: 100px;
float: left;
text-align: center;
line-height: 100px;
box-sizing: border-box;
}
.all {
width: 300px;
height: 300px;
position: relative;
}
.final {
position: absolute;
left: 0;
bottom: 0;
}
</style>
<body>
<div class="all">
<div class="ver">A</div>
<div class="level">B</div>
<div class="square">E</div>
<div class="ver">C</div>
<div class="level final">D</div>
</div>
</body>
</html>

解法三:
使用了margin-bottom负值,不会造成本身的移动,会造成兄弟元素的上移,于是有了第三种解法

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.ver {
border:1px solid #000;
width: 100px;
height: 200px;
float: left;
text-align: center;
line-height: 200px;
box-sizing: border-box;
}
.level {
border:1px solid #000;
width: 200px;
height: 100px;
float: left;
text-align: center;
line-height: 100px;
clear: right;
box-sizing: border-box;
}
.square{
border:1px solid #000;
width: 100px;
height: 100px;
float: left;
text-align: center;
line-height: 100px;
box-sizing: border-box;
}
.all {
width: 300px;
height: 300px;
position: relative;
}
</style>
<body>
<div class="all">
<div class="ver">A</div>
<div class="level">B</div>
<div class="square">E</div>
<div class="ver" style="margin-bottom: -100px;">C</div>
<div class="level">D</div>
</div>
</body>
</html>