CSS之盒模型

一些理论

• html对容器进行定义，比如<div>可以用来声明容器，一个容器包含Margin、Border、Padding、Content四个部分。
• 其中Margin、Border、Padding，可以在后面加上-bottom、-top、-left、-right等来进行相关量的设置。
• Padding有两个数时，采取上下 左右的方式排列，当有四个数时按照上右下左的方式排列。
• 在border中solid表示实线，double表示两个边框。
• 学习了块级元素、内联元素、行内块状元素等的定义和运用。
• 自学了弹性盒子（并在作业中进行了应用）。

一些实践

• 用弹性盒子等盒模型进行了页面设计，代码：

  .flex-container {
          display: -webkit-flex;
          display: flex;
          width: 1400px;
          height: 250px;
          background-color: lightgrey;
      }
  
      .flex-item {
          background-color: rgb(148, 181, 242);
          width: 470px;
          height: 200px;
          margin: 10px;
      }
  
      div {
          text-align: center;
          background-color: lightgrey;
          width: 300px;
          padding: 25px;
          margin: 25px;
          margin-left: auto;
          margin-right: auto;
      }

• 在盒子中插入图片，让页面更美观。

JS初步

学习的内容比较多，包括课上部分及课后实践，我将通过作业来进行知识集会。

• 学会了使用let进行变量声明。
• 使用`<input>`让用户输入数字，再使用parseInt函数取用户输入的数字进行比较
• 使用循环来进行用输入的数值和计算机的数值的循环比较，来判断用户输入值的大小。
• 通过取count即循环次数的值，利用表达式来评估用户得分。

          function text(){
              let x=parseInt(count);
              let y=105-x*5
              window.alert("您的得分为" +y+"分");
          }

  这里我用的等式让用户如果一次答对即满分，次数增加，分值减五。

• 使用object从对象中取出元素用于程序运行。
• 但是我没有设计当输入为空或者并没有输入数字时的弹窗，其实本来有这个思路的，但是调试了两天发现一直有bug，所以放弃了这个方案。以及人机角色互换这一个加分项我觉得做的有缺陷，偏大和偏小按钮点击触发部分没太有思路，硬着头皮做了发现也有点问题，又花费了一天半的时间，快要ddl了于是我先提交了作业，目前还在调试，不知道会不会可以再完善些。

总结

第二次作业比第一次难度有所提升，学到的东西也更多了 ( ‘-ωก̀ )，可以真真切切地体会到调试代码的痛并快乐着的感受了(´•灬•‘) ε。
有些部分比如循环的应用以及函数的应用等部分，对我这个小小白来说真的很头大 Σ(っ °Д °;)っ，借助了网络上的资源进行学习，勉强完成前两条加分项，但第三条加分项做的不够好，突然开始害怕能不能成功加入前端捏 இдஇ。（虽然但是，拒绝摆烂！！！ᕦ(ò_óˇ)ᕤ ）

于叶萌