小白前端开发笔记-（行内元素、块级元素、行内块元素、之间的区别与特点）

行内元素(inline-level)

	行内元素又称内联元素，不能独占一块区域，根据自身内容（文字/图片）大小来确定自身区域大小。所以通常不能设置宽高、对齐等属性，通常用于
	控制页面文本内容。
	
	**特点**
	
	1.总是和相邻的行内元素从左到右排成一排。
	2.设置宽高无效。水平方向的padding、margin可以设置但垂直方向的设置无效（详见5 6）。
	3.默认宽度是其自身内容的宽度。
	4.行内元素仅能容纳其他行内元素或文本。*（特殊：<a>内可以放块级元素但<a>内不可再放链接）*  
	5.margin-top margin-bottom无效，左右正常。
	6.padding-top padding-bottom有效果，但和正常不同可以认为解析无效。左右正常。
	7.line-height和text-center有效果，但和正常不同可以认为解析无效。（给自己）
	8.所有的行内元素，在垂直方向上是相对于文字基线对齐。
	9.所有的行内元素会识别回车为空格，在浏览器上水平之间就有一个缝隙。
	
	常见的行内元素如:<span> <a> <strong> <em> <b> <s> <i> <font>......

块级元素(block-level)

	块级元素会独占一行或多行，其宽高可以任意设置，通常用于搭建网页布局部分，使网页结构更加紧凑合理。
	
	**特点：**
	
	1.每个块级元素均独占一行。
	2.宽度高度可以自定义设置。
	3.默认宽度为所在容器宽度的100%。
	4.可容纳行内元素等其他元素。*(特例见5)*
	5.p不能包其他块级元素，可能会被解析成两个并列的p标签。
	6.h1-h6：不能包自己和彼此，但是可以包其他元素。
	
	常见的块级元素如: <div> <p> <ul> <li> <h1-h6>......

行内块元素（inline-block）

	可以理解为特殊的行内元素，像<img>可以设置宽高、对齐等属性的同时又不会独占一行，把这样一类既具有行内元素特点又具有块级元素特点的标签
	称为行内块元素。
	
	**特点：**
	
	1.和相邻的行内元素在同一行，但之间会有空白缝隙。
	2.默认的宽高是其本身内容的宽高。
	3.宽度、高度、行高、内外边距都可自定义设置。
	
	常见的行内块元素如：<img> <input> <select> <textarea> <button> <label>......

标签显示模式转换（display）

	当给一个元素设置宽高时无效时，或想让元素显示在一行时，可用display方法来改变标签的显示模式。
	
    行内元素：---->display:inline;
	块级元素： ---->display:block;
    行内块元素：----> display:inline-block;
	加上类似li的小黑点：---->display：list-item；（需要放在ul/ol中）
	隐藏：---->display：none （用于实现鼠标悬停出框）
	例子 div ：hover+p {display：block；}