# 一.基础页面开发
# 1.步骤 1-设计稿审查
# 1.1 跨页面可复用组件
- Header-顶部导航
- Footer-底部信息
# 1.2 当前页面可复用组件
除去跨页面可复用的组件，剩余的区域，我们可以进一步抽出当前页面可复用的组件，以减少后续重复性的开发工作。
参考上述的设计稿线框图，我们可以提取如下【当前页面可复用组件】：
1.billboard-信息公告牌
2.Ad-board-商品广告位
设计稿审查的过程中，如何将内容模块按照合适的颗粒度抽离成为组件，并确定其可复用性及复用范围？这是需要在日常工作中逐步培养的能力。
实际上，设计稿的审查流程一般都比较固定，我们可以将其整理成为团队内通用的审查清单：
- 确定设计稿的开发友好性（是否有还原成本高或无法还原的地方）
- 确定一些特殊的元素是否有合理的边界处理（如文案超出外层容器的边界怎么办）
- 确定页面的框架结构（Layout）
- 确定跨页面可复用的组件（Site Component）
- 确定当前页面可复用的组件（Page Component）
# 2.步骤
设计稿审查完毕后我们就可以着手准备进行页面编码的工作了
# 盒模型
盒子总宽度 = width + padding + border + margin
# 布局
网页常见的布局方式大概有五种：普通文档流布局、浮动布局、绝对布局、弹性布局、网格布局
- 普通文档流
默认的布局方式，由块级元素和行内元素等组成，元素之间按照从左到右，从上到下的顺序排列
- 浮动布局
相对于普通文档流布局，浮动布局会脱离普通文档流，分为左右浮动，一般会在普通文档流布局的上面进行界面的布局，如果想避免浮动布局遮盖普通布局的情况，可以考虑使用清除浮动。
- 绝对布局
元素使用position:absolute属性进行绝对布局，使用绝对布局的元素会脱离文档流，其定位是参考祖先元素中position为非static值得第一个元素
- 弹性布局
也称 Flex 布局，是一个完整的模块，而不是一个单一的属性，其中有的属性是设置在父元素上，有些则是设置在子元素上。如果我们说传统的布局是建立在块级元素和行内元素的文本流上，那么 Flex 布局就是建立在flex-flow的轴方向上的。
- 网格布局
是用制定行与列的二维 CSS 布局方法，可以将页面分割成数个主要的区域，或者用来定义组件内部元素间的大小、位置和图层之间的关系。
# 语义化
HTML 语义化就是根据具体的内容，选择合适的标签进行代码的编写，这样既能便于开发者阅读和维护也能让搜索引擎的爬虫更好的识别。简单的说，就是可以让机器更容易读懂网页内容。