一切皆为框
div、h1 或 p 元素常常被称为块级元素(block element)。这意味着这些元素显示为一块内容,即“块框”。与之相反,span 和 strong 等元素称为“行内元素”(inline element),这是因为它们的内容显示在行中,即“行内框”。
块元素的盒子模型(box model of block element)
块级元素:块状元素排斥其他元素与其位于同一行,可以设定元素的宽(width),高(height)和边距(margin, padding),块级元素一般是其他元素的容器,可容纳块级元素和行内元素。常见的块级元素有div, p ,h1~h6等。
行内元素:行内元素不可以设置宽(width)和高(height),但可以与其他行内元素位于同一行,行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定,宽度由内容的长度控制。常见的行内元素有a, em ,strong等。
行的块元素:如果我们即想让一个元素可以设置宽度高度,又想让它以行内形式显示,这时我们可以设置display的值为inline-block.
块级元素转行内元素
display:inline;
行内元素转块级元素
display:block;
元素转行内块元素(inline-block)
display:inline-block;
参考:
http://www.w3school.com.cn/css/css_boxmodel.asp
http://www.jb51.net/css/68729.html