何米酥`s Blog

css练习一则

December 23, 2017

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

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

解法一:使用table

<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

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

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

Profile picture

Written by 何坤舆 EFE