significantfrank
我是阿里巴巴架构师,团队直招技术岗,请联系我:fulan.zjf@alibaba-inc.com

导航

 

一切皆为框

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


版权声明:本文为博主原创文章,未经博主允许不得转载。

posted on 2013-08-11 08:45  significantfrank  阅读(158)  评论(0编辑  收藏  举报