关闭顶部展开顶部

DivCSS教程:blockelement与inlineelement元素详解_Div+CSS教程

编辑Tag赚U币
教程Tag:暂无Tag,欢迎添加,赚取U币!
  块元素(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”。

  需要说明的是:inline element的中文叫法,有多种内联元素、内嵌元素、行内元素、直进式元素。基本上没有统一的翻译,爱怎么叫怎么叫吧。另外提到内联元素,我们会想到有个display的属性是display:inline;这个属性能够修复闻名的IE双倍浮动边界问题。

  块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后,块元素和内联元素的这种属性差异就不成为差异了。比如,我们完全可以把内联元素cite加上display:block这样的属性,让他也有每次都从新行开始的属性。

  可变元素是基于以上两者随环境而变化的,它的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。可变元素还是属于上述两种元素类别,一旦上下文关系确定了他的类别,他就要遵循块元素或者内联元素的规则限制。

  html标签的block、inline分类明细:

  块元素(block element)

示例代码 [www.mb5u.com]
  ◎ address - 地址
  ◎ blockquote - 块引用
  ◎ center - 举中对齐块
  ◎ dir - 目录列表
  ◎ div - 常用块级轻易,也是css layout的主要标签
  ◎ dl - 定义列表
  ◎ fieldset - form控制组
  ◎ form - 交互表单
  ◎ h1 - 大标题
  ◎ h2 - 副标题
  ◎ h3 - 3级标题
  ◎ h4 - 4级标题
  ◎ h5 - 5级标题
  ◎ h6 - 6级标题
  ◎ hr - 水平分隔线
  ◎ isindex - input prompt
  ◎ menu - 菜单列表
  ◎ noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容
  ◎ noscript - 可选脚本内容(对于不支持script的浏览器显示此内容)
  ◎ ol - 排序表单
  ◎ p - 段落
  ◎ pre - 格式化文本
  ◎ table - 表格
  ◎ ul - 非排序列表

  内联元素(inline element)

示例代码 [www.mb5u.com]
  ◎ a - 锚点◎ abbr - 缩写
  ◎ acronym - 首字
  ◎ b - 粗体(不推荐)
  ◎ bdo - bidi override
  ◎ 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 - 定义变量

  可变元素

示例代码 [www.mb5u.com]
    可变元素为根据上下文语境决定该元素为块元素或者内联元素。
  ◎ applet - java applet
  ◎ button - 按钮
  ◎ del - 删除文本
  ◎ iframe - inline frame
  ◎ ins - 插入的文本
  ◎ map - 图片区块(map)
  ◎ object - object对象
  ◎ script - 客户端脚本

来源:无忧整理//所属分类:Div+CSS教程/更新时间:2007-08-14
loading.. 评论加载中....
相关Div+CSS教程
闂傚倷鐒﹂惇褰掑春閸曨垰鍨傞梺顒€绉甸崑銈夋煛閸ヨ埖绶涚紓宥嗙墵閺屾盯鍩勯崘顏佸闂佹娊鏀辩敮妤呭Φ閸曨垰鍗虫俊銈傚亾濞存粍鍎抽—鍐Χ韫囨洜肖闂佺懓鍤栭幏锟�
濠电姷鏁搁崑娑㈩敋椤撶喐鍙忔い鎾卞灩绾惧鏌熼悙顒佺伇婵℃彃鐗撻弻锟犲磼濠靛洨銆婃繝鈷€鍕姇濞e洤锕幊鐘活敆婢跺棗浜炬繝闈涱儐閻撶喖鏌曡箛濠冩珔闁诲繑鐓¢弻鐔煎礄閵堝棗顏�
濠电姷鏁告慨鐑姐€傛禒瀣劦妞ゆ巻鍋撻柛鐔锋健閸┾偓妞ゆ帒瀚峰Λ鎴犵磼鏉堚晛浠滄い鎾冲悑瀵板嫮鈧綆浜濋楣冩煟鎼达絾鍤€閻庢凹鍘界粩鐔煎幢濞嗘劕搴婃繛鎴炴煣缁舵岸寮婚敐澶婎潊闁宠桨鑳舵导鍫ユ⒑閻熸澘娈╅柟鍑ゆ嫹
濠电姷鏁告慨鐑姐€傛禒瀣劦妞ゆ巻鍋撻柛鐔锋健閸┾偓妞ゆ帒瀚峰Λ鎴犵磼鏉堚晛浠滄い鎾冲悑瀵板嫭绻濋崟闈涙倯闂傚倷娴囬鏍垂鎼淬劌绀嬫い鎾楀嫅姘舵⒒娴g瓔鍤欓梺甯到宀h儻顦查摶鐐寸箾閹存瑥鐏柛瀣樀閺屻劑鎮ら崒娑橆伓
闂傚倸鍊烽懗鑸电仚缂備胶绮崝娆撶嵁婵犲啯鍎熼柕濞垮劤閸旓箑顪冮妶鍡楃瑨闁稿﹤鎽滈弫顕€宕奸弴鐐殿啇闁诲孩绋掑玻鍧楁儗閹烘柡鍋撶憴鍕缂佽鐗撳顐﹀箻缂佹ɑ娅㈤梺璺ㄥ櫐閹凤拷
闂傚倸鍊烽懗鑸电仚缂備胶绮崝娆撶嵁婵犲啯鍎熼柕濞垮劤閸旓箑顪冮妶鍡楀潑闁稿鎹囬弻娑橆潩椤掑鍓崇紓渚囧枛閿曨亪寮崒鐐茬鐟滃繘鎮¢幘缁樼厽閹兼惌鍨冲畝娑㈡煛閸涱喚绠為柟顖氳嫰閳诲酣骞嬮悩纰夌闯濠电偞鎸婚懝楣冩晝閵壯€鍋撳鐐
闂傚倸鍊峰ù鍥Υ閳ь剟鏌涚€n偅灏伴柕鍥у瀵粙濡歌濡插牓姊烘导娆忕槣闁革綇缍佸璇测槈濡攱鏂€闂佸綊鍋婃禍鐐烘嚄閾忓湱纾藉ù锝夋涧婵¤姤淇婇悙鑸殿棄妞ゆ洩缍佹俊鎼佸煛婵犲啯娅栨繝鐢靛仜濡瑩宕归悽鐢电當闁跨喓濮甸埛鎴︽煕濠靛棗顏╅柍褜鍓欓…鐑界嵁婵犲洤绠婚柤鍛婎問濞肩喖姊虹捄銊ユ珢闁瑰嚖鎷�
闂傚倸鍊风粈渚€骞栭锕€鐤柣妤€鐗婇崣蹇擃渻鐎n亝鎹g紒鈧繝鍌ょ唵闁兼悂娼ф慨鍫ユ煟閹垮嫮绉柟顔款潐濞碱亪骞忓畝濠傚Τ婵犵數鍋涢惇浼村磹閺囥垺绠掗梻浣瑰缁诲倸螞濞嗘垹鐭嗛柍褜鍓熷娲川婵炴碍鍨块幃褔鎮╅懠顒佹闂佽澹嗘晶妤呭疾閹间焦鐓ラ柣鏇炲€圭€氾拷
婵犵數濮烽。钘壩i崨鏉戝瀭妞ゅ繐鐗嗙粈鍫熺節闂堟稒锛嶉柣鏂挎娣囧﹪顢涘顒佸€柣搴㈡皑缁垶濡甸崟顖氱閻庨潧鎽滈悾娲煟鎼淬垻鍟查柟鍑ゆ嫹
濠电姷鏁告慨鐑姐€傛禒瀣劦妞ゆ巻鍋撻柛鐔锋健閸┾偓妞ゆ帒瀚峰Λ鎴犵磼鏉堚晛浠滄い鎾炽偢瀹曞爼濡搁妷顔荤穿濠碉紕鍋戦崐鏍箰閼姐倖宕查柛鎰典簴閸嬫挸顫濋搹顐ゅ涧婵烇絽娲ら敃顏堛€佸☉妯滄棃鍩€椤掍焦娅犻柛娆忣槺缁♀偓濡炪値鍋掗崰妤冣偓姘炬嫹
婵犵數濮烽。钘壩i崨鏉戝瀭妞ゅ繐鐗嗙粈鍫熺節闂堟稒锛嶉柣鏂挎閹便劌顪冪拠韫闁诲氦顫夊ú锕傚礈閻旂鈧礁鈻庨幘宕囶槯闂佺粯鎸哥花鍫曞磻閹剧粯鍋ㄩ柛娑橈功閸樻悂姊洪崜鎻掍簼缂佽瀚悺顓炩攽閻樻剚鍟忛柛锝庡灦楠炲繘鏁撻敓锟�
婵犵數濮烽。钘壩i崨鏉戝瀭妞ゅ繐鐗嗙粈鍫熺節闂堟稒锛嶉柣鏂挎閹便劌顪冪拠韫闂備礁鎼懟顖炲箠濮椻偓瀹曟椽鍩€椤掍降浜滈柟鍝勬娴滈箖姊虹€圭媭鍤欓梺甯秮閻涱噣骞嬮敃鈧粻娑㈡⒒閸喓鈯曟い鏂挎濮婄粯鎷呴崨濠冨創闁诲孩纰嶉幃鍌炵嵁韫囨稒鏅搁柨鐕傛嫹
婵犵數濮烽。钘壩i崨鏉戝瀭妞ゅ繐鐗嗙粈鍫熺節闂堟稒锛嶉柣鏂挎閹便劌顪冪拠韫闁诲氦顫夊ú鈺冪礊娓氣偓閻涱喚鈧綆浜栭弨浠嬫煕椤愵偄浜楃紒鎲嬫嫹
濠电姷鏁告慨鐑姐€傛禒瀣劦妞ゆ巻鍋撻柛鐔锋健閸┾偓妞ゆ帒瀚峰Λ鎴犵磼鏉堚晛浠滄い鎾冲悑瀵板嫭绻濋崟顓炲箑闂傚倷鑳堕幊鎾绘偤閵娧勫床闁告洦鍨奸弫鍌炴倵濞戞鑲╂崲閸℃ǜ浜滈柡宥庣厛濞堟柨顭胯瀵墎鎹㈠┑瀣剁稏妞ゆ棁妫勯锟�
闂傚倷娴囬褎顨ラ幖浣稿偍婵犲﹤鐗嗙粈鍫熺節闂堟侗鍎愰柛瀣儔閺岀喖骞嗛悧鍫闂佹椿鍘介〃鍛村煘閹达附鍋愰柟缁樺笚濞堫參姊烘總鍛婃锭缂傚秴锕濠氬Χ婢跺娈熼梺闈涱槶閸庨亶锝炲澶嬧拺缂備焦岣挎竟鍕磽瀹ュ嫮顦﹂柣锝呭槻閳诲酣骞樼€涙ɑ顏熼梻浣芥硶閸o箓骞忛敓锟�
UB闂傚倸鍊风粈浣革耿鏉堚晛鍨濇い鏍仜缁€澶嬩繆閵堝懏鍣界€规挷绶氶弻娑㈠Ψ閵忊剝鐝曢柣搴㈢瀹€鎼佸箖濡も偓閳藉鈻嶉搹顐㈢伌闁挎繄鍋ら弫鎾绘晸閿燂拷
闂傚倸鍊峰ù鍥ㄧ珶閸喆浠堢紒瀣儥濞兼牕鈹戦悩宕囶暡闁绘帡绠栭幃妤呮偨閻㈢偣鈧﹪鏌涚€n偅宕岄柣娑卞櫍瀹曞綊顢欓崣銉ф/濠电姷鏁告慨顓㈠磻閹剧粯鐓ラ柣鏇炲€圭€氾拷
闂傚倷娴囬褎顨ラ崫銉т笉鐎广儱顦崹鍌炴煕濠靛棗顏甸柤鏉挎健閺屾盯濮€閵忕姵顔�
闂傚倸鍊风粈渚€骞夐垾鎰佹綎缂備焦蓱閸欏繐顪冪€n亝鎹g紒鈧繝鍌ょ唵閻犻缚娅i悘閬嶆煕濡や胶顣茬紒缁樼洴瀹曞崬螖閳ь剟顢楅姀銈嗙厱闁绘劕妯婂Σ鍦磼缂佹ḿ銆掔紒杈ㄧ懇閹晠宕崟顐㈣厫闂傚倷鑳舵灙濡ょ姴绻橀獮蹇涙晸閿燂拷
缂傚倸鍊搁崐鎼佸磹閻戣姤鍊块柨鏇炲€归崑锟犳煥閺囩偛鈧悂宕归崒娑氱瘈濠电姴鍊搁顐c亜閳哄懏鏁遍柕鍥у楠炴帒顓奸崶鑸敌滅紓鍌欑劍瑜板啫锕㈤柆宥呯劦妞ゆ帒鍊告禒顖炴煕婵犲啰绠樼紒杈ㄦ尭椤繃锛愬┑鍥ㄦ珦闂備浇娉曢崳锕傚箯閿燂拷
©2017 www.mb5u.com婵犵數濮烽。钘壩i崨鏉戝瀭妞ゅ繐鐗嗙粈鍫熺節闂堟稒锛嶉柣鏂挎閹便劌顪冪拠韫闁诲孩顔栭崳顕€宕抽敐澶婄畺闁冲搫鎳庣粻鐢告煙閻戞ɑ灏柣锔兼嫹
闂傚倸鍊峰ù鍥Υ閳ь剟鏌涚€n偅宕岄柡宀€鍠栭、娑樷堪閸愮偓姣夋俊鐐€戦崕濠氬箯閿燂拷&闂傚倸鍊风粈渚€骞夐敍鍕殰闁圭儤鍤﹀☉銏犵睄闁割偆鍣ュΛ鍛存⒑鐠恒劌娅愰柟鍑ゆ嫹