一．排版思路，从上到下，从左到右，从大到小。

二．首先确定排版分区，排除色块分布，然后再从简单的部分开始。

三．在某一块内将HTML部分写好，再加上ID或CLASS，利用CSS控制。

四．善于利用参考手册，根据参考手册的分类进行查找。

五．常用大类：

七．内外边距，以及盒子模型

火狐上看，黄色的为外边距，深灰色的为边框，紫色的为内边距，蓝色的为元素内容
利用F12对代码进行调试，可以点击页面的元素，查看HTML代码和CSS样式

当页面元素不方便点击时，也可以点击代码部分，查看所在的位置和样式
有一些常用标签，是自带内外边距的。如：body/ul/p/h1-h6。要用到这些标签的时候，注意观察内外边距，一般在一开始就设置为0.
body,p,ul,h1{margin:0px;padding:0px;}

八．切图的过程中，不注意调整大小，切图不准确。PS基本技能不熟练。
选择切片工具，利用alt+鼠标滚轮调整图片缩放比例，保证边缘的贴合。Alt+ctrl+shift+s保存切好的图片，注意右上角的保存格式。

九．浮动问题
在HTML中，有很多标签是默认占满全行的，即使规定了宽度，这一行的后面也不会再放东西了。
如果需要两个DIV并排排列，需要给这两个DIV都加上浮动，并且在下一个元素将浮动清除。
如果没有及时清除浮动，可能会造成之后的元素X轴跟在之前某个浮动的元素后面，造成元素的位置混乱。
浮动为：float:left/right
清除浮动：clear:left/right/both

十．内边距使用时出现的问题，元素位移时出现的问题
当一个元素添加了内边距，会扩大元素所占的位置。如：一个元素为100*100，设置了内边距padding:10px后，它占的位置为120*120；一个元素宽度为100%，加了内边距后，会将其整个宽度在100%的基础上再加一段，造成页面宽度过大。

同理，当把这个元素再往右移动若干像素后，总宽度也会随之发生改变。在这里如果用transform，也会造成上图所示情况。
在实现后，及时检查，是否出现了大小不正常，宽度不正常，莫名其妙的滚动条等情况。

十一．在调整文字的上下居中时，利用line-height属性，而不是一味的加上内边距。
处理文字时，尽量使用文字类的属性。

一．当DIV1里面有一个图片，需要控制图片在DIV1内居中时。
（1）在图片外嵌套一个DIV2，让DIV2在DIV1内居中。

（2）给DIV1加一个属性，text-align:center；

十三．伪类
各种标签都有伪类的属性，为
选择器:伪类名
如：#wd:focus（输入框焦点）
a:link {color: #FF0000}/* 未访问的链接 */
a:visited {color: #00FF00}/* 已访问的链接 */
a:hover {color: #FF00FF}/* 鼠标移动到链接上 */
a:active {color: #0000FF}/* 选定的链接 */

十四．改变a标签的尺寸大小时，必须加上display:block.
改变A标签的文字颜色和下划线，必须制定到该A标签，制定外面嵌套或者里面嵌套的别的标签都不行。

十五．加边框时，需要注意到隔壁元素的距离，也许你加粗了边框，但是由于空间不够，被其他元素挡住了。