MyException - 我的异常网
当前位置:我的异常网» HTML/CSS » 行内元素跟块级元素有哪些

行内元素跟块级元素有哪些

www.MyException.Cn  网友分享于:2015-02-11  浏览:0次
行内元素和块级元素有哪些?

一.行内元素和块级元素有哪些?

块级元素

  
<address> information on author
<blockquote> long quotation
<button> push button
<caption> table caption
<dd> definition description
<del> deleted text
<div> generic language/style container
<dl> definition list
<dt> definition term
<fieldset> form control group
<form> interactive form
<h1> heading
<h2> heading
<h3> heading
<h4> heading
<h5> heading
<h6> heading
<hr> horizontal rule
<iframe> inline subwindow
<ins> inserted text
<legend> fieldset legend
<li> list item
<map> client-side image map
<noframes> alternate content container for non frame-based rendering
<noscript> alternate content container for non script-based rendering
<object> generic embedded object
<ol> ordered list
<p> paragraph
<pre> preformatted text
<table> table
<tbody> table body
<td> table data cell
<tfoot> table footer
<th> table header cell
<thead> table header
<tr> table row
<ul> unordered list

行内元素

  
<a> anchor
<abbr> abbreviated form
<acronym> acronym
<b> bold text style
<bdo> I18N BiDi over-ride
<big> large text style
<br> forced line break
<button> push button
<cite> citation
<code> computer code fragment
<del> deleted text
<dfn> instance definition
<em> emphasis
<i> italic text style
<iframe> inline subwindow
<img> Embedded image
<input> form control
<ins> inserted text
<kbd> text to be entered by the user
<label> form field label text
<map> client-side image map
<object> generic embedded object
<q> short inline quotation
<samp> sample program output, scripts, etc.
<select> option selector
<small> small text style
<span> generic language/style container
<strong> strong emphasis
<sub> subscript
<sup> superscript
<textarea> multi-line text field
<tt> teletype or monospaced text style
<var> instance of a variable or program argument

二.行内元素与块级元素有什么不同?

1.尺寸-块级元素和行内元素之间的一个重要的不同点

行内元素和width

W3C CSS2 标准规定行内元素、非置换元素不会应用width属性。

以下例子中,对行内元素<a>应用了width:200px,你可以看到,根本就没有什么效果。

行内元素和块级元素有哪些

行内元素和height

W3C CSS2 标准规定行内元素、非置换元素不会应用height属性,但是盒子高度可以通过line-height来指定。

以下例子,对行内元素<a>应用了height:50px,你可以看到什么效果都没。

行内元素和块级元素有哪些

行内元素和padding

你可以给行内元素设置padding,但只有padding-left和padding-right生效。

以下例子,行内元素<a>应用了padding:50px。你可以看到对左右的内容有影响,但是对上下没影响。

行内元素和块级元素有哪些

行内元素和marging

margin属性也是和padding属性一样,对行内元素左右有效,上下无效。

下面的例子,对<a>应用了margin:50px,你可以看到左右边缘是生效了但是内容上下却没有。

行内元素和块级元素有哪些

记住对行内元素

设置宽度width 无效。
设置高度height 无效,可以通过line-height来设置。
设置margin 只有左右margin有效,上下无效。
设置padding 只有左右padding有效,上下则无效。注意元素范围是增大了,但是对元素周围的内容是没影响的,看图上效果就知道了

上文部分翻译自:http://www.maxdesign.com.au/presentation/inline/

 

2.text-align属性是两者表现的又以不同之处

W3C CSS2.1规范第16.2节 对text-align 有详细地描述:
------------------------------------------
值: left | right | center | justify | inherit
初始值:匿名值,由'direction'的值而定,如果'direction'为'ltr'则为'left',如果'direction'为'rtl'则为'right'。
应用于: 块级元素,表格单元格,行内块元素
继承性: 是
计算后的值:初始值或指定值
------------------------------------------

这个特性描述了如何使一个块元素的行内内容对齐。
注意一点,标准里说这个属性是用来对齐行内内容的,所以,应该对块级内容起作用。
解释一下,行内内容是说由行内元素组成的内容,行内元素大家都知道吧,比如 SPAN 元素,IFRAME元素和元素样式的 ‘display : inline’ 的都是行内元素;块级内容跟则是由块级元素构成,DIV 是最常用的块级元素。块级元素和行内元素的区别是,块级元素会占一行显示,而行内元素可以在一行并排显示。
这样,我们对这个特性的认识应该就清楚了。但是,问题来了,虽然标准里这么规定,那么是不是所有浏览器都遵守呢?答案是否定的。猜猜是哪个浏览器这么特立独行啊? IE!!
IE6/7及IE8混杂模式中,text- align:center可以使块级元素也居中对齐。其他浏览器中,text-align:center仅作用于行内内容上。
解决这个问题比较好的方式,就是为所有需要相对父容器居中对齐的块级元素设置“margin-left:auto; margin-right:auto”。但这个方式 IE6/IE7/IE8的混杂模式中不支持,所以还要设置父容器的 "text-align:center;"。

若居中对齐的子元素内的行内内容不需要居中对齐,则还需要为其设置“text-align:left”: 

文章评论

程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
Java程序员必看电影
Java程序员必看电影
程序员必看的十大电影
程序员必看的十大电影
如何成为一名黑客
如何成为一名黑客
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
鲜为人知的编程真相
鲜为人知的编程真相
旅行,写作,编程
旅行,写作,编程
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
程序员都该阅读的书
程序员都该阅读的书
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
为什么程序员都是夜猫子
为什么程序员都是夜猫子
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
老程序员的下场
老程序员的下场
编程语言是女人
编程语言是女人
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
漫画:程序员的工作
漫画:程序员的工作
我的丈夫是个程序员
我的丈夫是个程序员
一个程序员的时间管理
一个程序员的时间管理
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
程序员和编码员之间的区别
程序员和编码员之间的区别
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
那些争议最大的编程观点
那些争议最大的编程观点
程序员的鄙视链
程序员的鄙视链
我是如何打败拖延症的
我是如何打败拖延症的
每天工作4小时的程序员
每天工作4小时的程序员
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
总结2014中国互联网十大段子
总结2014中国互联网十大段子
10个调试和排错的小建议
10个调试和排错的小建议
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
程序员应该关注的一些事儿
程序员应该关注的一些事儿
代码女神横空出世
代码女神横空出世
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有