转载：img是什么元素？置换元素？

转载： https://blog.csdn.net/kingliguo/article/details/52643594

img是什么元素？

应是行内元素，判断一个元素是行内元素，仍是块元素，无非就是看它是不是独占一行。img标签显然没有独占一行，固它是行内元素。这没有问题。

既然img是行内元素，那为何能够经过CSS设置框高呢？

尽管img是行内元素，但同时它也是置换元素，置换元素通常内置框高属性，所以能够设置其框高。

<img src="/i/mouse.jpg" height="200" width="200"  />

那么什么又是“置换元素”呢？

置换元素就是会根据标签属性来显示的元素。反之就是非置换元素了。

好比img根据src属性来显示，input根据value属性来显示，所以可知道img和input是置换元素，固然同理textarea, select,也是置换元素；

 

什么是块级元素与行级元素？

块级元素

会占领页面的一行，其后多个block元素自动换行、 能够设置width，height，设置了width后一样也占领一行、一样也能够设置   margin与padding属性。ps:常见的块级元素:div,img,ul,form,p等

行级元素

与其余元素在同一行上，高度，行高以及底边距不可改变，高度就是内容文字或者图片的宽度，不能够改变。ps：em，strong，br,input等

display:inline-block，block，inline元素的区别

一、display：block将元素显示为块级元素，从而能够更好地操控元素的宽高，以及内外边距，每个块级元素都是重新的一行开始。

二、display : inline将元素显示为行内元素，高度，行高以及底边距不可改变，高度就是内容文字或者图片的宽度，不能够改变。多个相邻的行内元素排在同一行里，知道页面一行排列不下，才会换新的一行。

三、display：inline-block看上去值名inline-block是一个混合产物，实际上确是如此，将元素显示为行内块状元素，设置该属性后，其余的行内块级元素会排列在同一行。好比咱们li元素一个inline-block，使其既有block的宽度高度特性，又有inline的同行特性，在同一行内有不一样高度内容的元素时，一般要设置对齐方式如vertical-align: top;来使元素顶部对齐。