一、页面布局

1、在设计页面的时候，从上往下开始进行总体布局，把一个页面分成多个大盒子，再对每一个盒子根据要求进行填充。

2、合理使用div、table、p等标签，根据标签的语义合理使用，能让开发过程更便捷，需要相同样式的模块，尽量使用相同的标签，这样css部分能更简洁。

3、对标签命名时，不能以自己的喜好命名，应该用大众熟知的英文或默认的习惯命名。

4、主要标签的摆放位置，不同的位置造成的效果往往是不同的

5、养成良好的习惯，对每一个部分的代码进行注释，这样方便自己也方便他人。

6、页面完成后，仔细的查看，对细节处进行微调，使得页面更加的完美。

二、工具

1、好的开发工具可以让开发过程更加的简单、便捷。

2、学会使用开发工具内的一些常用的快捷键，这样能让我们的开发速度得到有效提高。

3、精确的测量工具，能让我们的开发过程更轻量化，不用每一个板块都去反复的调整。

4、学会利用身边的资源查询自己不知道、不熟悉的标签及属性。

三、开发过程中遇到的陌生标签、属性

1、display：none；隐藏当前的模块。display：block可以显示隐藏了的标签

可以用这一属性配合伪类实现图片或者文字的从无到有的效果显示

常用：目标 { display：none ；}? ? ? ? ? ? ?目标父级：hover 目标{ display：block； }

2、transform 属性，利用transform ：scaleX(2) 括号内的数值是放大的倍数

利用该属性进行图片或者盒子的放大

四、开发过程中遇到的问题

1、在一个盒子里，想将盒子放在图片内，但是图片是插入的，将图片设为块元素，盒子浮动但还是不能实现堆叠，只能将图片设为背景图片才能将盒子显示在图片上

2、元素浮动后，设置margin-top，改变的父元素的位置，目标元素在父元素内位置并没有改变，只有在父级元素中设置overflow：hidden才能正常设置目标元素的margin值

3、当盒子同时需要边框和背景色时，两者尽量存在色差，如果边框和背景是同一颜色，即使边框是虚线，无论设置多大的边框线值，都只是增加边框的宽和高，并不会显示虚线。

4、想将图片周围都设置阴影，需要将x，y两个值设为0，才能达到该效果。