行内元素&块状元素

原文地址：block、inline、inline-block区别以及标签嵌套

1、block

　　　将元素转为块元素，块元素占一行，可以设置宽和高。

2、inline

　　将元素转为行内元素，占一行，不可以设置宽和高。

3、inline-block

　　将元素设置为行内块元素，这时元素既可以设置宽和高，又占一行。但这时的元素之间会出现缝隙，解决办法：1）设置浮动 2)将父元素的font-size设置为0，子元素设置为实际大小

4、常见的几种元素

　　块级元素 ：div、h系列、li、dt、dd、p

      行内元素  ：span、u、a、、em、b、i、u、em

      行内块元素：input 、img 、button 、texterea 、label。

5、p标签不能包含div标签

　　块级元素和行内元素之间的嵌套，是块级可以嵌套行内元素和某些块级元素，而行内元素不能嵌套块级元素，可以嵌套文本和其他行内元素。但有几个特殊的块级元素只能包含行内元素， h1~h6、p、dt，因此p标签不能包含div元素，因为浏览器渲染的缘故，p包含div元素时会被渲染成：<p>xxx</p><div>xxxx</div><p></p>。

　　li 内可包含 div 标签

　　　　 <li><div></div></li>

　　块级元素与块级元素并列、行内元素与行内元素并列

　　　　<div><h2></h2><p></p></div>　　正确

　　　　<div><a href="#"></a><span></span></div>　　正确

　　　　<div><h2></h2><span></span></div>　　错误，行内元素与块级元素并列了（这条？？？）

关于行内元素的padding和margin，由a测试可得，padding在四个方向都是有效的。margin在竖直方向无效。

--------------------------小实验--------------------------

（1）添加padding之前，没有margin：

（2）添加padding之后，没有margin:

所以说行内元素的padding在四个方向都是有效的，但是竖直方向上的padding是不会对周边产生影响的。

（3）添加margin之后：

可见水平方向的margin有效。行内元素的margin在竖直方向上应该也是有效的，但是不会产生影响就像padding一样，再加margin的不可见性（上不了色加不了框啥的）所以就跟完全不存在似的（一个猜想，不一定对）。