今天完成的事情

今天主要进行了任务十51包装网页面的修改

今天遇到的问题

问题1：如下图，图中两个对口箱我设置的参数为50%,即两个模块应该是并排显示的。css样式媒体查询如下图。

解决：经过师兄知道，才知道媒体查询设置区间不够严谨导致的，此处媒体查询，我应该为.radio-wrap-2添加一个参数为min-width：500px; ，因为我同时设置了max-width：1400px和max-width：500px，但是500px的作用并不能够生效

问题2：如下图所示的定制流程布局，这个地方好久都没搞定，因为四个模块内又是两条线加一个圆圈组成的，两边的线的长度不能给固定的，但是又不知道怎么给

解决：后来实在没辙，找师兄帮忙，经过师兄指点，豁然开朗。首先给4个流程外的父元素一个固定宽度，然后每个子元素使用calc属性，线的宽度就完美解决了，起初自己也使用了这个属性，但是自己语法出错，所以就没继续用这个方法，以下是代码

今天的收获

今天主要都是在修改页面布局，主要收获就是calc的使用进一步理解了

CSS calc() 函数

定义与用法

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

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

     ● 任何长度值都可以使用calc()函数进行计算；

     ● calc()函数支持 "+", "-", "*", "/" 运算；

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

calc()实例

上面的用法是不是很简单呢，那我们来看一个完整的实例： 
说明：以下示例只展示calc用法及效果，实际项目根据需求取最优实现方式。

html代码片段

<div class="warpper">

    <div class="box1"></div>

    <hr>

    <div class="box2"></div>

</div>

css代码片段

.warpper {

    width: 200px;

    margin: 0 auto;

    padding: 15px 0;

    background-color: #f00;

}

.box1,

.box2 {

    height: 50px;

    line-height: 50px;

    text-align: center;

    padding: 10px;

    border: 5px solid #000;

    background-color: #ff0;

}

.box1 {

    width: 100%;

}

.box2 {

    width: calc(100% - (10px + 5px) * 2);

}

明天的计划

1.这两天都在修改之前任务页面，明天争取完成任务十一