前端入门：First day 如何实现一个页面

某人最近要入前端的坑，应TA要求，今天先说：一个页面，应该从何下手？以下全是个人见解，如有描述不准确的地方，欢迎指正，大家共同学习。

首先，拿到一个页面，应该整体分析一下它的布局，比如：能分成上中下or左中右or上中（中又分为：左中右）下等，先拆大块，分好之后，再去细化每个大块里的布局。

拆完以后呢？当然是把刚刚拆的块用代码堆起来啊。这时候得知道两个规则：BFC和IFC。根据需要选择正确的规则，实现规范的页面。比如只有块级元素，此时用BFC；块级元素中仅包含内联元素，此时遵守IFC。

啥是BFC？应用于块级元素的规则。

• 同一个BFC中，盒子布局是从包含容器顶部开始的；
• 每个盒子的左边界都要紧靠包含容器的左边界（所以，块级元素都是单独成行）；
• 相邻块级元素垂直margin重叠；容器内外相互隔绝，互不影响。

啥是IFC？不用多说。

• 盒子水平一个接一个排列，垂直方向对齐方式：底部、顶部or基线（默认）；
• 一个或多个内联盒子组成一个行框，行框的宽呢由它包含的内联盒子决定（也受浮动的影响）；
• 一个行框一行放不下内联盒子的时候，就会在垂直方向再生产新的行框，上下一个挨着一个，但是不会重叠；
• 内联盒子高小于行框的高时，垂直方向对齐方式由vertical-align决定；
• 多个内联盒子宽小于包含它们的行框时，水平方向分布由text-align决定。