CSS基础-块级元素与行内元素

文章总结了什么是块级元素、行内元素；有哪些块级元素、行内元素；块级元素与行内元素间的相互转换；行内置换元素的特殊性。

1

什么是块级元素、行内元素

块级元素：

独占一行；元素的宽高、以及内外边距都可设置；元素宽度在不设置的情况下，是它本身父容器的100%。

行内元素：

不会自动进行换行；元素的宽高不可设置；内边距可以设置、外边距水平方向有效，竖直方向无效；元素宽度在不设置的情况下，随内部元素的内容变化。

2

有哪些块级元素、行内元素

常见块级元素：

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

常见行内元素：

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

* span - 常用内联容器，定义文本内区块

* a - 锚点

* strong - 粗体强调

* b - 粗体

* em - 强调

* i - 斜体

* small - 小字体文本

* big - 大字体

* sub - 下标

* sup - 上标

* label - 表格标签

* img - 图片* input - 输入框

* select - 项目选择

* textarea - 多行文本输入框

* abbr - 缩写

* code - 计算机代码(在引用源码的时候需要)

* acronym - 首字

* bdo - bidi override

* br - 换行

* cite - 引用

* dfn - 定义字段

* font - 字体设定(不推荐)

* kbd - 定义键盘文本

* q - 短引用

* s - 中划线(不推荐)

* samp - 定义范例计算机代码

* strike - 中划线

* tt - 电传文本

* u - 下划线

* var - 定义变量

3

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

行内元素和块级元素都不是绝对的，可以相互转换,，通常有这些方式可以转换。

1、display，将元素设置为块级、行内或是其它。

2、float，隐形地把内联元素转换为行内块级元素。不会占据一行，相当于display：inline-block;

3、position,属性值为absolute、fixed时,隐形地把内联元素转换为块级元素，其它属性值不会做转换。

3

置换元素

、、、、是行内元素，但是它们却可以设置宽高，这是为什么呢？因为它们是行内置换元素。

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

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