元素的介绍

首先，我先跟大家放出我们今天所要学习的大致内容。

常用的元素分为两类：
1.块级元素
2.行内元素(也称内联元素)

块级元素：div、address、form、h1-h6、p、pre、table、url 、ul、li、menu、nav、section等
行内元素：a、span、label、img、input、button、em、i、select 、iframe、textarea、strong、b等

什么是块级元素？ ：所有块级元素，元素的默认宽度都是100%，横铺整个浏览器，块级元素定义了以后，下一个元素默认是自动换行的。因为上一行已经被块级元素给铺满了。我们已经知道我们熟用的div是一个块级元素，如图，我定义了5个div：

效果如下图：

有没有发现这5个元素都是独自占领一行的？ 如果效果不明显，那么我加上背景颜色，我们再来看一下。


你会很明显的发现，定义了一个div以后，在没有定义height的情况下，这个div就会根据内容高度自动的充满整行。宽度等同于浏览器宽度，为100%，高度为div内容的高度。所以说，如果一个块级元素既没有定义高度也没有定义宽度，自动伸缩是根据你们里面内容的多少而扩展，反之如果设定了高度，如果内容高度超出设定高度则会溢出，采取的解决方案就是高度加高或者overflow:auto/hidden;

我给大家讲一下这个overflow，首先，我们定一个DIV，里面放入大量的内容：

效果：

可以看到，文字内容已经超出了div的高度，这个时候我们加上overflow:auto;

可以看到，超出的内容被隐藏掉了，div右边出来了一个滚轮，用于拖动来查看内容
overflow:hidden的效果：


overflow:hidden 右边是没有滚动条的，只会隐藏掉超出div的元素。
这就是overflow:hidden/auto 的区别，他们都能很好的控制溢出div高度的内容。

什么是行内元素？：行内元素是服务于块级元素的。宽度和高度只会随着内容的变化而变化。如图：

这里可以看到，我给这个行内元素加了很大的宽度和高度，但是效果呢？：

所以说给行内元素设定宽度和高度是没有意义的。但是，行内元素也可以变成块级元素，加一个样式：display:block/inline-block;接下来我跟大家讲一下display这2个的区别，首先来看diplsy:block，当我增加了这一个css以后，这个行内元素就变成了一个块级元素：

效果如下：

可以看到，这个时候，span是一个块级元素了。

那display:inline-block又跟display:block有什么区别呢？我们上代码和效果，这个最直观：


可以看到，宽高生效了，这说明，display:inline-block是将元素内容变成一个块级元素，可以设置宽高，但是元素又是一个内联元素，在不设定宽高的情况下根据内容来设定默认的宽度和高度。

接下来，我会介绍更多的样式和属性，这些其实并不用死记硬背，多写，多练，自然而然就熟了。