web前端布局篇（切图）
web前端布局篇（切图）
这⾥的切图不是指ps⾥⾯的切图，⽽是指web前端⼯程师将设计图转化为静态页⾯的过程。
在布局的时候，我们通常会以设计图为蓝本，然后将设计图拆分，变成⼀个⼀个的HTML标签，搭配上css样式，实现静态页⾯的布局。web前端新⼿在布局的时候出现的问题
1.只注重结果，忽略代码结构。
2.代码的重构性很差，稍微⼀加减板块，整个页⾯全部瘫痪。
3.CSS冗余样式很多。
4.标签使⽤不准确，不考虑标签对浏览器的友好程度。
5.不注意代码分离，喜欢把样式写在页⾯⾥，甚⾄写⾏内样式。
6.不注意代码格式，不换⾏不缩进。
ps切图软件有哪些
7.命名不规范。
……
问题很多，这⾥就不⼀⼀列举了。
怎么解决这些问题？
1.将设计图归类，把同类的块和元素归成⼀类，便于编写公共样式。
2.代码注意清除浮动和宽⾼的计算，避免标签超出⽗类元素的范围。
3.CSS合理的使⽤选择器，将重复的代码合并。
4.尽量减少使⽤对浏览器不友好的标签，例如（table、h1）等。
5.在写页⾯之前，建好⼤致的⽂件夹，便于存放不同的⽂件，进⾏代码分离。
6.建⽴良好代码的编写习惯。
7.使⽤英⽂命名，驼峰命名法。
其实呢，道理⼈⼈都懂，但是做起来是很难的。因此，为了养成良好的编码习惯，其实最主要的在于，⾃⼰没有意识到这样写出来的代码会带来什么样的后果。
为什么要注意这些问题呢，其实原因很简单。因为代码和页⾯都是不固定的。当你编写代码的时候，有可能设计需求也在时时刻刻的改变，因此，在编写代码的时候，如果不注意⼀些规范和经验，就会造成后期维护困难等问题，⽽在团队开发中，假设⼀个⼈的代码写的很乱，也会导致在别⼈修改你的代码时，需要更多的沟通，降低效率。