html 内联元素和html 块级元素概述及区别
作者：佚名
字体：[ ] 来源：互联网 时间：03-25 14:27:18
块级元素(block)特性:总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;内联元素(inline)特性:和相邻的内联元素在同一行，接下来为大家详细介绍下，感兴趣的朋友可以参考下哈
块级元素(block)特性： &总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示; &宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制; 内联元素(inline)特性： &和相邻的内联元素在同一行; &宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小; 块级元素主要有： 代码如下: address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul 内联元素主要有： 代码如下: 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 , textarea , tt , u , var 可变元素(根据上下文关系确定该元素是块元素还是内联元素)： 代码如下:applet ,button ,del ,iframe , ins ,map ,object , scriptCSS中块级、内联元素的应用： 利用CSS我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。 主要用的CSS样式有以下三个： &display:block -- 显示为块级元素 &display:inline -- 显示为内联元素 &dipslay:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性 我们常将&ul&元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。 题外话：最近整理有关块级元素和内联元素区别的有关知识，网上找了不少相关的文章，发现大家的理解似乎都有误，我自己亲自测试了下，发现了不少的问题： 1.内联元素的margin-left / margin-right及padding-left / padding-rigtht是可以控制的，所以可以通过这4个属性来控制内联元素的宽度。 2.内联元素的内部也可以放块级元素标签，而且内部的块级元素标签会撑大外部的内联标签，所以可以通过放块元素来控制内联元素的高度(网上介绍的是内联元素只能放文本及其他内联元素) 例如： 代码如下: &a& &div style="width:100height:100"&测试&/div& &/a&
大家感兴趣的内容
12345678910
最近更新的内容行内(内联)元素和块级元素的区别
行内(内联)元素和块级元素的区别
作者：admin来源：Web前端之家浏览：1257评论:0
页面中元素一般分为两种：块级元素，行内元素（内联元素），即然分为两种元素，那么他们之间必然有区别：1.块级元素总是独自占一行，前面和后面就好像有个换行符，内联元素总是和其它的内联兄弟占一行2.块级元素可以设置宽和高度值，内联元素就不行了，他们的宽和高总是随着自身的内容自动扩大和缩小3.块级元素的margin和padding都正常，内联元素左右maring和左右padding正常，上下不正常不识别，也就是说不能通过margin-top和padding-top来改变行高关于第3点补充下：行内元素margin和padding左右间距在各个浏览器中解析的都完整,上下间距那就是杯具,各个浏览器解析还不一样,设置个背景貌似人家又认了,但是他周围的元素当他设置的上下间距不存在,所以在以后的项目中,不给行内元素设置上下的margin和padding了总结：想让自己独占一行就会块级元素(div,dl,dt,dd,ul,li...)，想让元素和其它元素在一行就用行内元素(span,a,img)，他们之间可以通过样式来转换disply:display:还有一个属性：display:inline-将对象呈递为内联元素，与其它的元素同处一行，但是内部又呈现出块级元素，也就是可以设置宽和度，打破了块级元素和内联元素的区别，此属性，IE8，FF3，其它的标准浏览器都识别，IE6，IE7，FF2不识别此属性，但是在IE6,7下面使用又好像识别了，是因为他触发了IE的haslayout，(类似于zoom:1),所以从表现上来说他们支持这个属性.（可以拿块级元素来试验，块级元素使用了这个属性就没有相应的功能了），FF2{display:moz-inline-box}//有可能会导致文本对齐问题如果块状元素(div..)表现这种属性,与外部沟通是内联,内部又是块状的可以这样设置(display:zooom:1)或 div{display:inline-//先触发layout}div{display:}这两个顺序不能颠倒了,不然就失效了好吧，就谈这里把，下面列举下普通的行内元素和块元素：块级元素列表&address&定义地址&caption&定义表格标题&dd&定义列表中定义条目&div&定义文档中的分区或节&dl&定义列表&dt&定义列表中的项目&fieldset&定义一个框架集&form&创建 HTML 表单&h1&定义最大的标题&h2&定义副标题&h3&定义标题&h4&定义标题&h5&定义标题&h6&定义最小的标题&hr&创建一条水平线&legend&元素为 fieldset 元素定义标题&li&标签定义列表项目&noframes&为那些不支持框架的浏览器显示文本，于 frameset 元素内部&noscript&定义在脚本未被执行时的替代内容&ol&定义有序列表&ul&定义无序列表&p&标签定义段落&pre&定义预格式化的文本&table&标签定义 HTML 表格&tbody&标签表格主体（正文）&td&表格中的标准单元格&tfoot&定义表格的页脚（脚注或表注）&th&定义表头单元格&thead&标签定义表格的表头&tr&定义表格中的行行内元素列表&a&标签可定义锚&abbr&表示一个缩写形式&acronym&定义只取首字母缩写&b&字体加粗&bdo&可覆盖默认的文本方向&big&大号字体加粗&br&换行&cite&引用进行定义&code&定义计算机代码文本&dfn&定义一个定义项目&em&定义为强调的内容&i&斜体文本效果&img&向网页中嵌入一幅图像&input&输入框&kbd&定义键盘文本&label&标签为 input 元素定义标注（标记）&q&定义短的引用&samp&定义样本文本&select&创建单选或多选菜单&small&呈现小号字体效果&span&组合文档中的行内元素&strong&语气更强的强调的内容&sub&定义下标文本&sup&定义上标文本&textarea&多行的文本输入控件&tt&打字机或者等宽的文本效果&var&定义变量
温馨提示本文作者系，经编辑修改或补充，转载请注明出处和本文链接
03-26&&12-03&&12-16&&02-18&&12-30&&03-05&&12-09&&10-17&&01-27&&08-22&&
||||||||||||||
Copyright (C)
,、+，页面等开发技术交流 All Rights Reserved.　Web前端交流群：(新)粤ICP备号-1&&国之画&&&& &&&&&&
&& &&&&&&&&&&&&&&&&&&&&
鲁ICP备号-4
打开技术之扣，分享程序人生！内联元素是什么意思呢？什么是块级别元素。
&&& 《CSS 权威指南》中文字显示：任何不是块级元素的可见元素都是内联元素。其表现的特性是“ 行布局”形式，这里的“行布局”的意思就是说其表现形式始终以行进行显示。比如，我们设定一个内联元素border-bottom:1px solid #000;时其表现是以每行进行重复，每一行下方都会有一条黑色的细线。如果是块级元素那么所显示的的黑线只会在块的下方出现。
p、 h1、或div等元素常常称为块级元素，这些元素显示为一块内容；Strong,span等元素称为行内元素，它们的内容显示在行中，即“行内框”。（可 以使用display=block将行内元素转换成块元素，display=none表示生成的元素根本没有框，也既不显示元素，不占用文档中的空间）
A：行内就是在一行内的元素，只能放在行内；块级元素，就是一个四方块，可以放在页面上任何地方。
B：说白了，行内元素就好像一个单词；块级元素就好像一个段落，如果不另加定义的话，它将独立一行出现。
C： 一般的 块级元素诸如段落&p&、标 题&h1&&h2&...、列表,&ul&&ol&&li& 、表格&table&、表单&form&、DIV&div&和BODY&body&等元素。而内联元素 则如: 表单元素&input&、超级链接&a&、图像&img&、&span& ........
D：块级无素的显著特点是：每个块级元素都是从一个新行开始显示，而且其后的无素也需另起一行进行显示。
E：&span&在CSS定义中属于一个行内元素，而&div&是块级元素。
对于学过CSS的人来说一听就能明白。可对于新手来说不易理解。
用 容器这一词会更容易形象理解它们的存在与用途，行内元素相当一个小容器，而&div&相当于一个大容器，大容器当然可以放一个小容器 了。&span&就是小容器，这样一说你也许会在脑海中有一个初步的印象了吧，如果我们想在大容器中装一些清水。但我也想在里装一些墨水怎么 办？很简单，我们把小容器拿出来装上墨水然后放入大容器里的清水中不就成了吗。
我在举个简单的一个实际例子吧：比如
&div&上海网站制作-&/div&
我想用CSS定义字母c的样式，因此我们就可以用到&span&了。
&div&上海网站设计- &span&&/span& W3C标准&/div&
块元素(block element)一般是其他元素的容器元素
块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。“form"这个块元素比较特殊，它只能用来容纳其他块元素。
如 果没有css的作用，块元素会顺序以每次另起一行的方式一直往下排。而有了css以后，我们可以改变这种html的默认布局模式，把块元素摆放到你想要 的位置上去。而不是每次都愚蠢的另起一行。需要指出的是，table标签也是块元素的一种，table based layout和css based layout从一般使用者（不包括视力障碍者、盲人等）的角度来看这两种布局，除了页面载入速度的差别外，没有其他的差别。但是如果普通使用者不经意点了 查看页面源代码按钮后，两者所表现出来的差异就非常大了。基于良好重构理念设计的CSS布局页面源代码,至少也能让没有web开发经验的普通使用者把内容快 速的读懂。从这个角度来说，css layout code应该有更好的美学体验吧。
你 能够把块容器元素div想象成一个个box，或者如果你玩过剪贴文载的话，那就更加容易理解了。我们先把需要的文章从各种报纸、杂志总剪 下来。每块剪下来的内容就是一个block。然后我们把这些纸块按照自己的排版意图，用胶水重新贴到一张空白的新纸上。这样就形成了你自己独特的文摘快报 了。作为一种技术的延伸，网页布局设计也遵循了同样的模式。.
内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素，常见内联元素 “a”。
块 元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后，块元素和内联元素的这种属 性差异就不成为差异了。比如，我们完全可以把内联元素cite加上display:block这样的属性，让他也有每次都从新行开始的属性。
& 权限：公开&&&来自：labs
本文仅代表作者个人观点。其原创性及文中表达的意见、判断、数据、观点和陈述文字等内容均与中国移动研究院无关。移动Labs博客致力于为ICT领域的研究者及从业者提供技术和业务交流的网络平台，对本文中全部或部分内容的真实性、完整性不作任何保证或承诺，仅供读者参考交流。
阅读全文：3180 | 转发(0) | 评论
Labs推荐给你的相关资讯
看过此博文的还看过
公司：上海协策网络科技有限公司
行业：运营商
总访问量：150959
京公网安备 |
中国移动通信研究院版权所有问说网 / 蜀ICP备号}