今天完成的事情

• 完成任务8三个页面的调试;将页面公共部分与主体部分的CSS样式表分离;
• 审查代码,优化样式,填写注释,删除冗余;
• 明天计划的事
• 开始下一个任务
• 
  

   遇到的问题

•  职位推荐页面,职位信息表单制作时,出现了padding内边距超出边框的现象
• 
• 方法总结:网页调试时不能看一眼就完事了,要理解到各个元素属性的相互影响;特别是在引入bootstrap框架时,要注意并了解各个类名带有的具体属性值,以免产生意想不到的结果.
• 
  

• 
  

  #  代码编写过程中思路比较混乱,代码显得十分杂乱不堪,造成测试和重构的时候异常痛苦,几乎是重写了几遍,其中主要的问题是类的命名混乱,html文档结构十分臃肿,css样式表时而重复时而遗漏.对此提醒自己以后要做到以下几点:写代码的时候把相关规范切出来以备查阅;养成写注释的习惯;学会对样式表进行分类,哪些是公共部分的,哪些是其中具体模块的;做到属性值层叠有序,符合规范;规则集相关性高的做到结构分明,并加以注释;等等...

   收获

• # CSS中如何给元素添加阴影;
• 1,text-shadow是给文本添加阴影效果，box-shadow是给元素块添加周边阴影效果。
• 
  
• 2基本值{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}
• 
  
• 3,阴影类型：此参数可选。如不设值，默认投影方式是外阴影；如取其唯一值“inset”，其投影为内阴影；

  X-offset:阴影水平偏移量，其值可以是正负值。如果值为正值，则阴影在对象的右边，其值为负值时，阴影在对象的左边；

  Y-offset:阴影垂直偏移量，其值也可以是正负值。如果为正值，阴影在对象的底部，其值为负值时，阴影在对象的顶部；

  阴影模糊半径：此参数可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；

  阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；

  阴影颜色：此参数可选。如不设定颜色，浏览器会取默认色，但各浏览器默认取色不一致，特别是在webkit内核下的safari和chrome浏览器下表现为透明色，在Firefox/Opera下表现为黑色，建议不要省略此参数。

  
  
• #  实现垂直居中的各种方法;
• 
  

• 1、绝对定位+margin：auto

• 实现原理：利用css定位规则，设置左右、上下方向定位为0，margin为auto，让css根据定位计算margin值，用hack的方式实现居中。

• 
  

• 2、绝对定位+margin反向偏移

• 实现原理：由于top、left偏移了父对象的50%高度宽度，所以需要利用margin反向偏移居中块的50%宽高。而margin中不能使用百分比，因为百分比是针对

  父对象的，所以需要手动计算定值指定margin值。这个方案需要固定尺寸值，以此来计算margin反向偏向值

  
  

• 3、绝对定位+transform反向偏移

  实现原理：方案3与方案2原理一样！不同点是使用了transform来代替margin做反向偏移，由于transform的计算基准是元素本身，所以这里可以用50%来做反向偏移。这个方案也需要固定尺寸值，浏览器以此为基准来计算定位！
  

• 4、display：tabel

  实现原理：方案4是实现效果比较好的，居中块的尺寸可以做包裹性，缺点是增加了一层table-cell层来实现垂直居中。方案4的居中块可以设置 max-

  height、max-width，而且居中块是可以具有垂直方向的包裹性的。水平方向由于是在table-cell里面的，所以会直接显示max-width，也就是宽度趋大。

  
  

• 5、display: inline-block

  实现原理：原理：利用inline-block的vertical-align: middle去对齐after伪元素，after伪元素的高度与父对象一样，就实现了高度方向的对齐。方案5实现效果更加好，居中块的尺寸可以做包裹性、自适应内容，兼容性也相当好。缺点是水平居中需要考虑inline-block间隔中的留白（代码换行符遗留问题。）。方案4的居中块可以设置 max-height、max-width，而且居中块是可以具有水平垂直两个方向的自适应。
  

• 6、display: flex-box

  实现原理： flexbox布局。专治各种布局定位难题。优点：能解决各种排列布局问题缺点：PC端某些旧浏览器支持度不高。
  

•