百度IFE零基础学院day12-15作业总结

百度IFE零基础学院day12-15作业总结

这次作业完成用了大概9个小时的时间

一、遇到的主要困难

• class声明有些混乱
• div在前期写html文档的时候没有很好的归纳总结
• 对布局部分还有很多坑要挖。

二、总结了以下问题

1. fixed和absolute的区别

• fixed定位基准是根据当前在浏览器窗口中的位置进行定位的。
• fixed有两种定位方式
  • 第一种：magin
    • 这种方式可以将位置相对于父元素进行第一次确定。
    • 注意：只有magin-left和magin-top有效
  • 第二种：top``````right``````bottom``````left
    • 这种定位以浏览窗口的边框作为基准进行定位
    • 注意：初始位置在其父元素的left=0;``````top=0;的位置
• absolute定位是以最近距离的有position属性且不为 static的父级元素为基准进行定位的。

2. flex多栏布局如何做到一部分固定一部分自动宽度

• 给需要固定宽度的设置width:num;
• 自动宽度的width:calc(100% - num);
• 注意:calc()函数中的+``````-要前后有空格。

3. 如何给input添加图标以及图标的定位

• background-image属性添加图像
• background-position图像定位

4. 如何设置input内的提示语以及边距

• placeholder属性设置提示语，在获得焦点时消失
• padding获得框内边距

测试页面test01.html

作业githhub地址