行内元素
span、strong、em、a、b、i
块级元素
div、p、ul、ol、dl、h1-h6、form、table
空(void)元素
空元素,即没有内容的 HTML 元素。空元素是在开始标签中关闭的,也就是空元素没有闭合标签。例如:br、hr、img、input、link、meta
行内元素和块级元素区别
行内元素 | 块级元素 |
---|---|
都在同一行上,直至排不开,才会换行;宽度随元素的内容而变化;水平方向排列 | 独占一行;宽度自动填满其父元素宽度;垂直方向排列 |
设置width,height属性无效 | 可以设置width,height属性 |
行内元素不能包含块级元素 | 块级元素可以包含行内元素和块级元素 |
行内元素设置margin 和 padding属性,水平方向有效,垂直方向无效;即:margin-left,margin-right,padding-left,padding-right 属性有效;margin-top,margin-bottom,padding-top,padding-bottom 属性无效 | 块级元素设置margin 和 padding属性,水平、垂直方向都有效 |
行内块级元素
和其他行内元素在同一行上,但是能设置 宽、高、顶和底 边距属性,img,input,td
相互转换
转换为行内元素:display:inline
转换为块内元素:display:block
转换为行内块元素:display:inline-block