html 左中右自适应布局(使用calc css表达式)

HTML左中右自适应布局使用calc CSS表达式的攻略，重点在于使用calc函数来计算元素的宽度。具体步骤如下：

第一步：HTML代码结构

<div class="left"></div>
<div class="right"></div>
<div class="center"></div>

第二步：定义CSS样式

首先要清除浏览器默认样式，将页面margin和padding都设置为0。

html, body {
  margin: 0;
  padding: 0;
}

接着定义左右两个块和中间的块：

.left {
  height: 100px;
  background-color: red;
  float: left;
}
.right {
  height: 100px;
  background-color: blue;
  float: right;
}
.center {
  height: 100px;
  background-color: yellow;
}

为了实现左右两块的自适应，需要使用calc函数。假定左块和右块的宽度都为200px，中间的块宽度需要自适应，可以将中间的块宽度计算为100% - 400px，代码如下：

.center {
  height: 100px;
  background-color: yellow;
  width: calc(100% - 400px);
}

左中右自适应布局的示例：

<div class="left"></div>
<div class="center"></div>
<div class="right"></div>

html, body {
  margin: 0;
  padding: 0;
}

.left {
  height: 100px;
  background-color: red;
  float: left;
  width: 200px;
}

.right {
  height: 100px;
  background-color: blue;
  float: right;
  width: 200px;
}

.center {
  height: 100px;
  background-color: yellow;
  width: calc(100% - 400px);
}

第三步：响应式布局

响应式布局可以根据窗口大小改变样式。以下是示例代码：

@media screen and (max-width: 600px) {
  .left,
  .right {
    width: 100%;
    float: none;
  }
  .center {
    width: 100%;
  }
}

当窗口大小宽度小于600px时，左右两块变为100%宽度，不再使用浮动布局，中间的块也变为100%宽度。

左中右自适应布局响应式示例：

<div class="left"></div>
<div class="center"></div>
<div class="right"></div>

html, body {
  margin: 0;
  padding: 0;
}

.left {
  height: 100px;
  background-color: red;
  float: left;
  width: 200px;
}

.right {
  height: 100px;
  background-color: blue;
  float: right;
  width: 200px;
}

.center {
  height: 100px;
  background-color: yellow;
  width: calc(100% - 400px);
}

@media screen and (max-width: 600px) {
  .left,
  .right {
    width: 100%;
    float: none;
  }
  .center {
    width: 100%;
  }
}

以上是HTML左中右自适应布局使用calc CSS表达式的完整攻略。