1、元素类型的定义
1-1、行内元素
行内元素主要是指strong或span之类的元素,该元素不会在元素之前或者元素之后生成“行分隔符”;
行内元素会水平排列成一行;
行内元素又分为置换元素和非置换元素;
1-2、 块级元素
块级元素主要是指div或者标题之类的元素,这些元素独占一行,多个块级元素在正常流中垂直排列。
1-3、空元素
没有闭合标签的元素,常见的有img、hr、br、input、link、meta等;
给空元素设置闭合标签是无效的
2、元素分类
行内置换元素:img、input、textarea、select
行内非置换元素:a、span、em、i、strong、b、label、sub、sup
块级元素:div dl dd dt h1~h6 header footer form ul ol li hr p table
3、二者的区别
1> 行内元素水平排列;块级元素垂直排列
2> 行内元素不支持width和height属性,它的width属性是由其内容撑开的;而块级元素可以设置width和height属性;
3> 块级元素可以包含行内元素和块级元素;但是行内元素不能包含块级元素,只能包含行内元素和文本内容;
4>块级元素可以设置margin属性和padding属性;行内元素也可以设置margin属性和padding属性,对于行内非置换元素只有水平方向生效,即left值和right值生效,但是垂直方向的margin值不生效;padding值生效。
4、行内元素和块级元素的转换
块级元素和内联元素可以通过`display`属性来转换:
1>将一个块级元素的
display
属性设置为inline,块级元素就被转换成了内联元素;
2> 将一个内联元素的display
属性设置为block,内联元素就被转换成了块级元素;
3> 将元素的display
属性的值设置为inline-block,也可以为元素设置宽高值;但是该值不支持IE6/7