【HTML】静态页面的开发流程及思路总结

一、确定版心

常见的版心宽度：
960px（知乎）
淘宝（1000px）
网易（1200px）
京东（1210px）
腾讯（1400）

二、整体布局

1、基本原则
先分析行模块再分析列模块
如果一行当中有多个模块，一定要放在同一个父模块中。列模块一般都用浮动，具体坐标，有层叠概念的需要用到定位。

2、网站中常见的定位应用场景
（1）轮播图中的小圆点、左右切换
（2）版心之外的广告
（3）下拉菜单
（3）二维码（有点击隐藏效果）

三、单个模块布局

1、先给模块宽高（高度最终完成是要去除的）背景颜色，实例化这个盒子
2、然后再分析模块的文本属性，其他属性。
3、一般模块是由标题和内容两个部分组成。

四、Padding和margin的选择

1、如果盒子本身有宽高，使用padding需要进行计算，使用margin注意两种情况还会导致外边距合并问题。
2、两种情况会导致外边距合并塌陷：
（1）垂直排列的两个块级元素
如果同时设定marigin-top和margin-bottom，合并宽度为两者之间最大值
（2）嵌套关系的两个块级元素（只存在第一个元素中）
如果子元素设置margin-top，父元素会跟着塌陷下来
3、解决方法有三种：
（1）父元素设置overflow:hidden、
（2）父元素定义1像素的上边框和内边距
（3）父元素设置浮动、子元素设置浮动

五、行间距的计算

行间距分为四条线：顶线、中线、基线、底线

行间距是基线到基线的距离，设置给行高

六、测距工具

测距、标记使用工具：markman
下载地址：http://www.getmarkman.com/