2017-2018年实习工作总结

发表于 更新于 分类于 ，
本文字数： 1.9k 阅读时长 ≈ 3 分钟

这是2017年11月-2018年2月在丁丁当实习时的笔记，当时记录在笔记本上，现在进行迁移到博客中。感谢宾哥，虽然没有实习很长时间，但是学到了很多，从最开始写一个页面需要一天半到两三个小时完成，细节不断优化，代码不断规范，还有充足的自学时间，十分感激。最开始实习的时候以为自己很厉害，其实现在看来真的经验不足，在实习之前都是一个人写根本没有发现自身的问题，仅仅就样式实现了就好，理论知识倒是可以，但是实践经验真的时不足，没有人提点，所以当时看2016年写的前端想重构，现在看2017年写的前端也想重构。

HTML + CSS

基础知识

  • css 顺序执行

  • 内盒尺寸（元素大小）：

    • Element Height: content height + padding + border
    • Element Width: content width + padding + border

  • 外盒尺寸（元素空间尺寸）：

    • Element空间高度: content height + padding + border + margin
    • Element空间宽度: content width + padding + border + margin

  • 子元素设置为绝对定位时，父元素要设置position: relative

  • float浮动：float未脱离正常的文档流，参照元素是父级元素

  • 绝对定位：脱离了正常的文档流。

  • opacity会将文字和背景都设置透明，如果只要背景设置透明需要设置rgba。父元素的filter: blur(50px);会影响到子元素。

  • data-*属性：一般用于数据存放，div元素只有id和class属性，要设置其他属性存值，需要使用h5的自定义属性，css设置样式[data-*] {xxx}

  • 图像预装载：提高图像访问速度

  • css雪碧图：图像合并，将多个小图标和背景图像合并到一张图片上用css定位来显示

  • 响应式布局：目的时为移动设备提供更好的体验，并且整合从桌面到手机的各种屏幕尺寸和分辨率