实习心得

2020 07-23

一.布局分析

由外向内的分析页面布局。

1. 确定页面的可视区，划分页面的模块。
2. 每一个模块中，分析他的行模块再分析行中的列模块。
3. 分析每一个模块的布局方式。思考宽高固定还是自适应。
4. 模块构建完毕后，再开始写每一模块中的样式。
5. 每一部分的样式布局要自己思考设定，不能照搬设计图，设计图只是为了给你它的宽高等一些参数。（注意设计图中的line-height和height的设定值）

---

二.代码

1. 时刻注意代码格式化（shift+command+f）（不能出现空行，空格，重复代码）
2. 命名规范（要语义化）
   • 布局方面命名可已使用h5语义化标签（header, footer, container, main, content, aside, page, section）写的东西是什么就叫什么名字（严禁出现数字，a/b/c/my等）。
   • 写有关产品的功能的命名，还有图片等命名要遵循产品是什么，用产品的特有名词或语义化命名。
   • 目录中文件夹命名小写，vue命名采用=>HelloWorld命名格式。
   • 目录中assets文件夹下放image/css资源，（！不要乱放）。

---

三.今日布局样式心得

1. 给一块内容布局时，先把他的外边界定好（padding-/），然后再向里面添加每一小块（这样每一小块的内容就不会超出预定边界）。
2. 样式被覆盖的时候设置z-index提高他的堆叠顺序。
3. 布局要适应每一台设备，分析宽高，不能定死。
4. 修改外部引用的样式时（父组建修改子组建样式）可使用深度选择器（百度具体用法）。
5. 可以在body中设置背景颜色。
6. 组件化要考虑解耦和可复用性等，不能每一模块都随意使用组件化。
7. 学会审查元素，审查元素的定位布局，通过控制台修改数据进行分析。
8. 熟悉webstorm常用快捷键，分屏写样式，尽可能通过一切手段提高代码编写效率。

---

2020 07-24

zhishang-demo总结

布局部分

1. 整体页面分析，页面适应不同网页大小，宽度不能定死（100%），里面组件宽度也要自适应（栅格布局)，下手前一定要对页面中每一部分的内容结构先做分析，分析布局，样式，实现的功能。
2. 整体分析页面，左侧导航条固定在左侧（fixed），导航部分样式结构相同，定义相同的class类名，写一次通用样式即可(熟悉scss使用)。导航下部分建议栏采用父相子绝bottom：0固定在底部。
3. 右侧上半部分，设置外层总体padding,实现内部区块的边界固定定位。右侧btns和左侧title采用flex实现自适应。
4. 主体部分从上到下分为四个大模块，每一个模块采用栅格布局，只设置每一个栅格的高度，宽度自适应，内部每一块自适应采用了justify-content:space-between.

细节

1. 注意：设置opacity子元素颜色会被影响，有opacity属性的所有后代元素都会继承 opacity 属性，而采用rgba来设置透明度不会影响到子元素。
2. 修改从第三方组件库引用的属性样式值时，可采用/deep/深度查找，或去掉scoped（父组件可以写子组建的样式，会污染全局）。