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
39
40
<html>
<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>
<style>
td {
width: 100px;
text-align: center;
}

td[height="200px"] {
line-height: 200px;
}

td[height="100px"] {
line-height: 100px;
}
</style>
</head>
<body>
<table></table>
<table border="1">
<tbody>
<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>
</tbody>
</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
59
60
61
62
63
64
65
66
67
68
69
70
71
<html>
<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>
<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>
</head>
<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
54
55
56
<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>
<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>

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