HTML元素类型

HTML元素类型

	html元素类型分三种：块元素、行内元素、行内块元素。

块元素（block）

		其他标签的容器。
		特点：
			1.独占一行；
			2.可以设置宽高，四个方向的内外边距；
			3.不设置宽度时，自动撑满父级元素
		常见的块元素有：div、ul、li、ol、p等。
		注意：p、dt、h标签不能嵌套块标签。

<div style='width:100px;height:100px;padding:10px;margin:10px;background:#f00;'></div>

以上图片为显示结果以及div的盒子模型布局。

行内元素

	特点：
			1.不独占一行；
			2.不可以设置宽高，设置了也无效；
			3. 可以设置四个方向的内边距以及左右的外边距，不可以设置上下外边距；
			4. 宽高由内容决定
		常见的块元素有：span、a、em、strong等。
		注意：a标签不能套a标签。
				 行内元素不能嵌套块标签

<span style='width:200px;height:200px;padding:10px;margin:10px;background:#f00;'>世界这么大我想去看看</span>

上图是代码运行后的结果，设置了宽高，对元素并没有任何影响，行内元素宽高都有内容决定。

行内块元素

	特点：
			1.不独占一行，从左至右依次排列在同一行，直到排不下了换行；
			2.可以设置宽高，设置四个方向的内外边距；
			3. 不设置宽高时，宽高由内容决定
		常见的块元素有：img、input等。
		注意：自带4像素；
				清除4像素的方法：
							1.vertical-align:middle:
							2.给父级设置font-size:0;

<input  style='width:200px;height:20px;padding:10px;margin:10px;background:#fac;'/>

上图是行内块元素的展示效果。