何米酥`s Blog

css练习一则

December 23, 2017

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

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

解法一:使用table

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

<!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负值,不会造成本身的移动,会造成兄弟元素的上移,于是有了第三种解法

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

Profile picture

Written by 何坤舆 EFE