html的三大元素包括顶级(top-level)元素,块级(block-level)元素和内联(inline)元素。
Top-level element 【顶级元素】
比如html, body, frameset等,它们都属于高级块级元素。Block-level element 【块级元素】
比如 p, h1~h6, div, ul,li
顾名思义就是以块显示的元素,高度宽度都是可以设置的。默认状态下每次都占据一整个行,后面的内容也必须再另起一行显示。
行级元素可以通过css的 display:block和float属性更改成块级元素。块级元素能够独立存在, 一般的块级元素之间以换行分隔。Inline element 【内联元素】
比如a, br, em, img, li, span
通俗点来说就是文本的显示方式,与块级元素相反,内联元素的高度宽度是不可以设置的,其宽度和高度就是根据自身文字或者图片的宽度延展得来。
内联元素的显示特点就是像文本一样的显示,不会独自占据一个行。
当然内联元素也能变成块级元素,那就是通过css的display:inline;和float来实现。
行内元素与块级元素有什么不同?
- 尺寸
1)width / heigh
这是块级元素和行内元素之间的一个重要的不同点 。
行级元素设置宽高无效,它的宽高仅会因内容的大小和多少而延展,块级元素可以任意设置宽高。
2)padding / margin
行级元素的间距和边距左右设置有效,但是上下的间距和边距无效
块级元素是构成一个html的主要和关键元素, 而任意一个块级元素均可以用Box model来解释说明. - text-align属性{left | right | center}
标准里说这个属性是用来对齐行内内容的,所以,不应该对块级内容起作用。
解释一下,行内内容是说由行内元素组成的内容。
但是 IE却没有遵守这个规定。IE6/7及IE8混杂模式中,text- align:center可以使块级元素也居中对齐。其他浏览器中,text-align:center仅作用于行内内容上。
解决这个问题比较好的方式,就是为所有需要相对父容器居中对齐的块级元素设置“margin-left:auto; margin-right:auto”。但这个方式 IE6/IE7/IE8的混杂模式中不支持,所以还要设置父容器的 “text-align:center;”。