HTML简易自适应布局

效果图：

第一步：在body下先建三个块级，代码如下：

<div class="one">第1个元素中的内容</div>
<div class="two">第2个元素中的内容</div>
<div class="three">第3个元素中的内容</div>

第二步：设置全局边框，代码如下：

* {
      margin: 0;/*被设置的对象相对四周的边距是0*/
      padding: 0;/*内边距为0*/
    }

第三步：设置块级的高度以及水平方向布局，代码如下：

div {      /*<div> 定义文档中的分区或节*/
      height: 100px;
      float: left;/*float(浮动):用于元素水平方向的布局*/
    }

第四步：设置每个块级的宽度以及背景颜色，代码如下：

.one {
      width: 30%;
      background-color: #b6a2dc;
    }

    .two {
      width: 40%;
      background-color: #9ee2ac;
    }

    .three {
      width: 30%;
      background-color: #f69654;
    }

每个块级的宽度，所占比例、背景颜色可自己去调。

全文代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自适应布局</title>
  <style>
    * {
      margin: 0;/*被设置的对象相对四周的边距是0*/
      padding: 0;/*内边距为0*/
    }

    div {      /*<div> 定义文档中的分区或节*/
      height: 100px;
      float: left;/*float(浮动):用于元素水平方向的布局*/
    }

    .one {
      width: 30%;
      background-color: #b6a2dc;
    }

    .two {
      width: 40%;
      background-color: #9ee2ac;
    }

    .three {
      width: 30%;
      background-color: #f69654;
    }
  </style>
</head>
<body>
  <div class="one">第1个元素中的内容</div>
  <div class="two">第2个元素中的内容</div>
  <div class="three">第3个元素中的内容</div>

</body>
</html>