题目要求

有如下布局：左侧固定宽度200px，背景色#2d3c4b；右侧自适应宽度，灰色间距20px，颜色#ccc；页面主体背景色#fff。请写出HTML结构与CSS代码。

calc()函数用于动态计算长度值

1、需要注意的是，运算符前后都需要保留一个空格，例如： width: calc(100% - 20px);

2、任何长度值都可以使用calc()函数计算；

3、calc()支持“‘+’”、“-”，“*”，“、”运算；

4、calc()函数使用标准的数学运算优先级规则

IE只兼容IE9以上

第一种方式：

我之前用border去做过右边的边框，我觉得做起来会比较麻烦。这个是涉及到盒子模型的问题。

标准盒子模型：一个块的总宽度 = width + margin(左右) + padding(左右) + border(左右)

怪异（IE）盒子模型：一个块的总宽度 = width + margin(左右) width(包含了padding和border的值)

两者区别就在于，width 是否包含 boder和padding。

html

<body>
    <div class="left"></div>
    <div class="right">
        <p class="right-in"></p>
    </div>
</body>

css

<style>
    html,body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    div {
        height: 100%;
    }
  .left {
      float: left;
      width: 200px;
      background-color: #2d3c4b;
  } 
  .right {
        width: calc(100% - 200px);
        position: absolute;
        left:200px;
        background-color: #ccc;
    }
    .right-in {
        width: calc(100% - 40px);
        height: calc(100% - 40px);
        background-color: #fff;
        margin: 20px;
    }
</style>

第二种: flex布局

html

<body>
<div class="container">
    <div class="left"></div>
    <div class="right">
        <div class="right-in"></div>
    </div>
</div>
</body>

css

<style>
    html,body { 
       height: 100%;
       margin: 0;
       padding: 0;
    }
    .container {
        display: flex;
        height: 100%;
    }
    .left {
        width: 200px;
        height: 100%;
        background-color: #2d3c4b;
    } 
   .right {
        width: calc(100% - 200px);
        background-color: #ccc;
    }
    .right-in {
        width: calc(100% - 40px);
        height: calc(100% - 40px);
        background-color: #fff;
        margin: 20px;
    }
</style>