CSS样式——标签类型分类与类型转换

按类型划分

• 块元素(block)

  • 特性

    1. 独占一行(由上向下排列)
    2. 支持所有样式
    3. 不写宽高时继承于父元素
    4. 所占区域是一个矩形

• 行内元素(inline)

  • 特性

    1. 从左往右排列
    2. 部分样式不支持
    3. 不写宽由内容决定，不能设置高度
    4. 所占区域不一定时矩形
    5. 元素之间空隙是由换行造成的

• 行内块元素(inline-block)

  • 同时具备块元素和行内元素的特性

按显示方式划分

• 替换元素：浏览器根据元素标签的和属性决定显示的内容
• 非替换元素：浏览器直接显示的内容

按内容划分

元素嵌套规则

• 块元素可以嵌套行内元素
• 块元素不一定能嵌套块元素
• 行内元素一定不能嵌套块元素

元素的类型转换

转换为块元素
display:block

转换为行内元素
display:inline

转换为行内块元素
display:inline-block