行内元素 块级元素 行内块级元素 空元素

一、行内元素的特点:

1. 总是和相邻的行内元素在同一行上(物以类聚)
2. 设置宽高无效,水平方向的padding和margin属性可以设置,但是垂直方向上的无效
3. 默认宽度是它自身内容的宽度

二、行内元素的间距问题:

   1.重设字体

       将行内元素的直接父级设置font-size=0px;再给行内元素设置字体大小就可以解决。

   2.借助HTML注释

       在两个行内元素之间加入HTML注释，告诉浏览器这中间不是换行也不是空格，而是连接在一起的，这样也可以解决。

三、块级元素的特点:

1. 总是另起一行（特立独行）
2. 可以设置其宽度、高度，内外边距
3. 在不手动设置宽度的情况下，宽度默认为所在容器的100%（即容器宽度）
4. 可以容纳行内元素和其他块元素

四、行内块元素的特点:

1. 和相邻行内元素在同一行，但是之间会有空白缝隙。
2. 默认宽度是他本身内容的宽度。
3. 宽度、高度、行高、外边距以及内边距都可以手动设置。

五、块级元素与行内元素的转换:

       display:inline-block;

       display:inline;

       display:block;

行内元素:

块级元素:

注意：这里input元素比较特殊，它属于行内块级元素。

可变元素:

可变元素为根据上下文语境决定该元素为块元素或内联元素

空元素:

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

1. br
2. meta
3. hr
4. link
5. input
6. img