总结行内元素与块级元素

一、区别：

	是否独占一行	width、height	margin	padding	默认宽高
块级元素	是	有效	有效	有效	撑满父元素
行内元素	否	无效	水平方向有效，竖直方向无效	有效	随内部元素的内容变化
行内块级元素	否	有效	有效	有效	随内部元素的内容变化

 

二、有哪些块元素与行内元素：

常见块级元素：

　　div , h1---h6 , p , ul , ol , dl , table , form

* div - 常用块级元素，也是css layout的主要标签
* h1---h6 标题
* p - 段落
* ul - 非排序列表
* ol - 排序表单
* dl - 定义列表
* table - 表格
* form - 交互表单
* hr - 水平分隔线
* pre - 格式化文本
* address - 地址
* blockquote - 块引用
* header - HTML5区段头或页头。
* footer - HTML5区段尾或页尾。
* section - HTML5一个页面区段。
* article - HTML5文章内容。
* aside - HTML5伴随内容。
* hgroup - HTML5标题组。
* menu - HTML5菜单列表
* figcaption - HTML5图文信息组标题
* figure - HTML5图文信息组
* audio - HTML5音频播放
* video - HTML5视频
* output - HTML5表单输出

常见行内元素：

　　span , a , strong , b , em ,  i , big , small ,label，img, input  , select ,  textarea（他们属于行内置换元素，下文详解）

* span - 常用内联容器，定义文本内区块
* a - 锚点
* strong - 粗体强调
* b - 粗体
* em - 强调
* i - 斜体
* small - 小字体文本
* big - 大字体
* sub - 下标
* sup - 上标
* label - 表格标签
* input - 输入框
* select - 项目选择
* textarea - 多行文本输入框
* abbr - 缩写
* code - 计算机代码(在引用源码的时候需要)
* acronym - 首字
* bdo - bidi override
* br - 换行
* cite - 引用
* dfn - 定义字段
* font - 字体设定(不推荐)
* img - 图片
* kbd - 定义键盘文本
* q - 短引用
* s - 中划线(不推荐)
* samp - 定义范例计算机代码
* strike - 中划线
* tt - 电传文本
* u - 下划线
* var - 定义变量

 

三、行内元素与块级元素间的相互转换

　　行内元素和块级元素都不是绝对的，可以相互转换,，通常有这些方式可以转换。
　　1.display:inline-block,将行内元素设置为行内块元素
　　2.float:left/right,float就是隐形的把内联元素转换为块级元素。但是他不会占据一行，相当于display：inline-block;
　　3.position,当对行内元素进行定位时，都会将行内元素转换为块级元素。
　　注意：只有通过display:block设置的行内元素才能继承父元素的宽度。

 

四、置换元素

　　<img>、<input>、<textarea>、<select>、<object>是行内元素，但是他们却可以设置宽高，这是为什么呢？因为他们是行内置换元素。

　　置换元素：一个内容不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，被称之为置换元素。浏览器根据元素的标签和属性，来决定元素的具体显示内容。 例如：浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来，而如果查看(x)html代码，则看不到图片的实际内容；<input>标签的type属性来决定是显示输入框，还是单选按钮等。

　　置换元素在其显示中生成了框，这也就是有的内联元素能够设置宽高的原因。