任务十

今天完成的事情

1. 1. 完善任务十。
2. 2.使用浮动与clearfix布局。
3. 3.整理vertical-align的生效方式与应用（进行中）。

明天计划的事情

1. 1.学习less的基本语法。
   
2. 2.使用less重写页面。

遇到的问题

1. 1.在写确定尺寸这一栏时，发现确定尺寸往右偏移，怀疑是上层元素浮动造成的，给上层元素添加clearfix后发现无效，百思不得其解，最后才发现是因为给上层元素固定了高度。但是里面的元素高度超出了，所以影响了下面的元素。

2.对于vertical-align何时生效，作用于哪些元素，是在父级还是在子级设置还是都需要设置，为什么需要加line-height才可以实现垂直居中？对于这些问题都比较模糊，但是垂直居中又是比较常见的一个场景，以前总是各种试，什么时候管用就用谁，浪费很多时间。

所以想做个整理，今天暂时做了一种情况内联元素（图片，inline-block）与单行文本的居中方法。就像上图这种。附上代码：

<div class="box2">
   <span class="box1"></span>
   <span class="txt">2333</span>
</div>
</body>

css代码：

.box{
   width:600px;
   height:200px;
   border: 1px solid #000;

  }
  .box1{
display: inline-block;
   width: 10px;
   height: 20px;
   border: 1px solid #000;
   line-height: 200px;
   vertical-align: middle;
  }
  .txt{
   display: inline-block;
   line-height: 200px;
   vertical-align: middle;
  }

对于其内部的子元素都要设置

vertical-align: middle;

如果父级是内联元素另外讨论，行高一定要和高度一样。至于对于vertical-align何时生效，明天再整理。

收获

1. 1.小课堂上师兄讲解了手机屏幕分辨率与css中的px的关系，设备像素（device pixels）是指与硬件设备直接相关的像素，是真实的屏幕设备中的像素点。比如说，一个电脑显示器的参数中，最佳分辨率是1920x1080，那么指的就是这个显示器在屏幕上用于显示的实际像素点，也就是设备像素。css像素（css pixels）。css像素是指网页布局和样式定义所使用的像素，也就是说，css代码中的px，对应的就是css像素。在100%缩放比例下，1个css像素等于1个设备像素。而现在的手机屏幕一般都是高清屏，1个css像素代表4个设备像素。
2. 2.学会了内联元素垂直居中布局的常用方法。