juejin.cn

块级元素：

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

行内元素：

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

常见块级元素：

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

常见行内元素：

span , a  ,strong  ,b ,em  , i  , big  ,small  ,label ,img , input  , select ,textarea

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

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

2、float，隐形地把内联元素转换为行内块级元素。不会占据一行，相当于display：inline-block;　　3、position,属性值为absolute、fixed 时,隐形地把内联元素转换为块级元素，其它属性值不会做转换。

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

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