一、pxcook使用技巧
白龙网在使用pxcook测量psd文件外边距时，一般要在开发模式下进行，分两种情况，以元素A为参照物，如果要测试元素A到元素B之间的距离，我们要把这个外边距放到元素A上，那么首先要选中A元素，然后把鼠标放到B元素上面或者边框边上，即可自动显示A元素的外边距。如果此时没有B元素，刚好要显示的A元素的外边距是A元素到浏览器窗口之间的距离，此时选中A元素之后，把鼠标放到A元素到B元素之间的空白处，即可显示A元素的外边距。另外，选择A元素，鼠标放到元素B上，显示边框的方法，不仅仅适用于相邻的两个元素之前，也适用于不相邻的元素之间，例如，最左边的元素，与最右边的元素。
给元素添加左边框，或者右边框，尽量添加到a元素上，这样可以确保边框与字体大小一致。
二、前端代码开发原则
写HTML/CSS代码要遵循几个原则：
从外后内：例如，先写通栏，再写版心；先写外内边距，再写实体样式；
从左到右：例如，先写左边盒子，再写右边盒子；
从下到下：先写上面盒子，再写下面盒子；
具体来说，先写HTML框架，再写对应的CSS样式，那么写样式时，仍然要遵循一个“从大到小”的原则：
先写浮动、再定位、显示模式；再写盒子宽度、高度、背景、位置；最后写内容的文字、文本样式，即可。
三、精灵图与定位配合使用
精灵图之前写过实现技术，在此，再总结下：
一是要保证行内盒子的大小与图片大小相同；二是设置背景；二是使用background-size调整精灵图的位置，属性值可正，可负。
另外，也可以使用“子绝父相”定位的方法，把背景图片定位到目标位置，用来显示精灵图片。需要注意的是，绝对定位的行内元素具有行内块的属性，因此该行内元素在定义宽高时，不需要再额外使用display:inine-block转化成行内块了。
当然，也可以通过伪元素添加一个标签，该标签是行内标签，然后添加背景，设置背景图片位置即可。
四、元素定位与背景定位
要区分背景位置与背景缩放的不同，例如，背景位置属性值有2个，水平与垂直；而背景缩放的属性值，可以是一个如保留定contain,cover，也可以是两个属性值得，数字或者百分比水平与垂直。
五、行内元素或者行内块垂直对齐
当行内元素，或者行内块图片与文字相遇时，使用vertical-align无法垂直居中时，解决的办法有3个，一是浮动，二是定位（left=0,top=0），三是行高。
如果要给第二个元素前添加伪元素，怎么做呢？先选择第二个元素，再使用伪元素，拼接在一起即可。
六、伪元素选择器
使用伪类选择器li:nth-child(7)时，注意，如果LI中有a时，可以这样写：li:nth-child(7)a，否则可能不会生效。
七、元素定位与背景定位
元素定位与背景定位是不同的，元素定位遵循“子绝父相”的原则，设置属性一般为正值；而背景定位，大多情况下用于精灵图，这个时候，其属性值一般为0或者负值。尤其要注意的是，如果某个元素使用了定位position功能，并且通过该元素又使用了精灵图的background-position功能，这个时候，使用pxcook测量出来的宽度、高度是不准确的，需要借助浏览器的调试工具，重新调整位置。
八、并集选择器共享同类CSS
在CSS中，相同外观的功能模块，样式只需要写一次即可，然后通过并集选择器，让相同外观的不同模块共享同一段CSS代码。
九、预防“塌陷现象”
如果不给父元素高度，那么，两个或者多个子元素在进行浮动排版时，会出现“塌陷现象”，解决的方案有一个，一是给父元素高度，二是给父元素清除浮动。两个方法都可以解决因浮动导致的排版错乱问题。