HTML元素分类
HTML元素分类
面试的时候被问了一个问题，块级元素和内联元素的区别。我想这不是很简单吗，就说块级元素是占据一整行而内联元素是一个一个紧挨着（用通俗的语言说的，感觉不太专业），然后面试官又问我内联元素可以使用padding和margin吗，我就懵了。顿时觉得自己学的东西很不扎实，深入一点的都不是很了解。
概念
就表现形式来看
内联元素/行内元素（inline）前后不产生换行，相邻的内联元素在同一行，其宽度随元素的内容而变化。
块级元素（block）前后都产生换行，所以块级元素总是独占一行。
其实还有一种内联块元素（inline-block）,将对象呈现为inline对象，但是对象的内容作为block对象呈现。
常见的块级元素有：
address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li
常见的内联元素有：
a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup
- 关于为什么br是内联元素。br标签产生的效果是换行，但是元素本身不占据一行的空间（我个人的理解）。
可变元素(根据上下文关系确定该元素是块元素还是内联元素)：
applet ,button ,del ,iframe , ins ,map ,object , script
内联块元素：只有在CSS中通过display:inline-block对一个对象指定inline-block属性，可以将对象呈递为内联对象。
就标签是否闭合来看
没有闭合标签的标签被称作空标签。XHTML强调空标签也要被正确的关闭，方法就是在最后加“/”。比如
标签要写成
。但是.在最新的HTML5规范中,官方是不建议空标签带上“/”的。也就是说
和
没有实质区别。详情可以看这篇
常见空标签：
br,hr,img,input,link,meta
不太常见的有：
area,base,col,command,embed,keygen,param,source,track,wbr
从元素本身的特点来看
从元素本身的特点来讲，可以分为替换和不可替换元素。
替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。如根据标签的type属性来决定是显示输入框，还是单选按钮等。这些元素往往没有实际的内容，即是一个空元素。一般来说替换元素是内联元素。
不可替换元素的内容直接表现给用户端。如
是一个不可替换元素，标签里的内容全被显示。(X)HTML 的大多数元素是不可替换元素。详情可以看这里
常见替换元素：
img、input、textarea、select、object
问题
这个时候回到面试时遇到的那个问题，内联元素可以使用padding和margin吗？又或者可以设置width和height吗？内联元素是否具有盒模型？
- 只有内联元素的margin-left / margin-right及padding-left / padding-rigtht是有效的。也就是说只有水平方向的margin和padding是有效。而当我们设置padding-top和padding-bottom时，确实显示出效果，但是竖直方向的内边距只有效果，对其他元素无任何影响。也可以说padding-top和padding-bottom不会影响它的高度，但是会影响他的背景高度。行内元素的padding和margin是否无效
- width和height对内联元素没有影响。因为内联元素的宽高随元素的内容而变化，能够影响它宽高的为其本身的内容。
- 内联元素具有盒模型。
然后我又遇到了一个问题，内联元素不能设置宽高，那为什么img可以设置宽高呢？
简单来说，行内替换元素一般有内在尺寸（替换元素比较特殊），所以具有width和height，可以设定。所以除了那几个替换元素，其他的行内元素还是不可以设置宽高哦~还是这个链接
*以上是我自己的一些理解，如果有不对的地方，请多多指教。
补充一个问题，内联元素绝对定位后可以设置width和height了？
额……试了下好像是可以的。这是由于display,position和float属性都能影响元素的显示及其位置，它们之间会相互影响。此处display在内联元素绝对定位后被重新计算，也就是说内联元素绝对定位后变成了块级元素。详情参见
OMG竟然有这个规范。