html排版分析

案例1

分析

1、首先我们是看它排在一行，排在一行目前有两种，行标签和块标签的浮动
2、接下来我们该思考如何选择这两个,我们先来看一下行标签特点，不支持宽高，内容撑开高度
所以当我们用行标签写会出现以下结果

抛开那些位置改变不谈，我们用行标签难以实现隔一段空白完成这一行.
3.我们常用的是块标签，因为它支持宽高设定，我们给定他们宽高后看到下面的界面

我们要实现一行排布，还需要用到浮动float

这样我们思路就完成了

案例二

1、我们先来分析一下这个图片，我们可以给他稍微划分一下

我们可以大致分为这几个板块，接下来我们就用到第一个案例的分析了，如何将这几个板块组合起来，加入我们都使用div标签，我们可以这样做

最顶部一个div标签，下面两个浮动的div标签，下面靠左放一个img标签，右手放两个p标签