HTML标签之块元素和内联元素
按照HTML标签在页面中的展现形式,我们把HTML标签分为块元素标签和内联元素标签。块元素标签在页面中独自占据一行,垂直排列,内联元素放在一起,显示在同一行,横向排列。
块元素特点:
1、总是另起一行开始
2、高度,行高以及上下内外边距都可控制
3、宽度默认是它所在容器的100%,除非设定一个宽度
4、款元素通常情况下可以内嵌内联元素,行内元素标准上是不允许内嵌块元素的。但在最近的HTML5中,内联元素有时候允许内嵌块元素,比如:A标签
5、通过设置display:block,可以把不是块元素的标签,具有块元素的属性。例如:设置高度、宽度、上下内外边距,当然还有其他的方法:设置float属性,Position属性
内联元素的特点:
1、和其它元素都在同一行上。
2、高度,行高以及上下内外边距都不可改变
3、宽度就是它所容纳的文字或图片的宽度,不可改变
4、通过定义display:inline,可以把块元素设置成行内元素。IE下比较特殊,还可以设置宽度高度,行高,内外边距。
在《CSS 权威指南》中这样定义到——任何不是块级元素的可见元素都是内联元素,其表现的特性是“行布局”形式, 这里的“行布局”的意思就是说其表现形式始终以行进行显示。
常见的块元素标签:
div、p
ul、ol、dl
h1、h2、h3、h4、h5、h6
table、form、fieldset
address、blockquote、center、dir、hr、pre、noscript/noframes
常用的内联元素标签:
a、label、span、em、strong、i、abbr、b、cite、code、
input、select、textarea、small、b、br、img、sub、sup、
u、strike
还有一些标签我们不能通过非......即......表述它们,他们在页面中的展现形式会根据标签所在的上下文来确定是块元素还是内联元素。一旦确定之后,就会遵循块元素或者内联元素的规则限制,它们有如下这些标签:
applet、button、del、iframe、ins、map、object、script
了解每一个标签的属性和默认样式,能够帮助我们更好的理解它们在浏览器中的布局形式,避免写一些冗余的代码。
HTML当中的标签都没有一个是绝对的布局方式,通常说的块元素和内联元素都是HTML标签所具有的默认布局方式,通过CSS我们可以把大部分的HTML标签,设置成我们想要展现的形式