03-HTML元素

HTML元素

非替换元素

• 元素的内容包含在文档中

替换元素

常见的替换元素：img、input、textarea、select、video、iframe、button

• 作为其他内容的占位符的元素，通过修改某个属性值而呈现内容
• 拥有自己的默认尺寸

块级元素

常见的块级元素：div、h1-h6、p、ul、li、ol、dl、dt、dd、table

• 独占一行
• 可以设置宽高，宽度默认填满父元素、高度默认由子元素撑开，即使设置宽度也是独占一行
• margin和padding都有效，垂直方向外边距会合并
• 两个块级元素相邻时无论源码是否存在换行，都不会出现缝隙
• display值有block、list-item、table

行内元素

常见行内元素：span、a、em、strong、lable、sub、sup

• 不独占一行，多个行内元素排在同一行，盛不下会才换行
• 设置宽高无效，宽度高度都由内容撑开
• border、margin和padding水平方向有效，垂直方向无效（无效是指不占据文档位置）
• 两个行内元素相邻会显示缝隙，该缝隙是由源码中两个块级元素不在一行有换行符导致的，若在一行则不会出现，行内元素可以理解为一个字符
• display值有inline

行内块元素

常见的行内块元素：img、input、textarea、select、video、iframe、button、canvas

行内块元素是特殊的行内元素也是特殊的块级元素

• 不独占一行，多个行内块元素排在同一行，盛不下会才换行
• 可以设置宽高，若不设置宽高由内容撑开
• margin和padding都有效，且无外边距合并问题
• 两个行内元素相邻会显示缝隙，原因与行内元素一样也可以理解为一个字符
• 行内块未设置高度时，即使没有内容也会有一个字符的高度
• display值有inline-block、inline-table

解决行内元素和行内块元素的缝隙方法

1. 将行内元素之间的换行符删除，也就是全部标签写在一行上、
2. 此缝隙是换行符导致的，换行符也是一个字符，将父元素的字体大小设置为0则可以消除换行符，由于css的继承性，此时这些行内块的字也无法显示需要为每个行内块元素重新设置字体大小

标签嵌套规则

• 块级元素可以嵌套行内元素和块级元素；行内元素只能嵌套行内元素
• 但是h1-h6、p和dt这些块级元素中只能包含行内元素
• 块级元素与块级元素并列，行内元素与行内元素并列