CSS元素类型

CSS元素类型

1.1 块级、行内级元素

• 根据元素的显示（能不能在同一行显示）类型，HTML元素可以主要分为2大类

  • 块级元素（block-level elements）

    • 独占父元素一行
    • 比如div、p、pre、h1~h6、ul、ol、li、dl、dt、dd、table、form、article、aside、footer、header、hgroup、main、nav、section、blockquote、hr等

  • 行内级元素（inline-level elements）

    • 多个行内级元素可以在父元素的同一行中显示

    • 比如a、img、span、strong、code、iframe、label、input、button、canvas、embed、object、 video、audio等

1.2 替换元素和非替换元素

• 根据元素的内容（是否浏览器会替换掉元素）类型，HTML元素可以主要分为2大类
  • 替换元素（replaced elements）
    • 元素本身没有实际内容，浏览器根据元素的类型和属性，来决定元素的具体显示内容
    • 比如img、input、iframe、video、embed、canvas、audio、object等
  • 非替换元素（non-replaced elements）
    • 和替换元素相反，元素本身是有实际内容的，浏览器会直接将其内容显示出来，而不需要根据元素类型和属性来判断到底显示什么内容
    • 比如div、p、pre、h1~h6、ul、ol、li、dl、dt、dd、table、form、article、aside、footer、header、hgroup、main、nav、section、blockquote、hr、a、strong、span、code、label等

2 元素分类的总结

3 CSS属性 - display

• block：让元素显示为块级元素
• inline：让元素显示为行内级元素
• inline-block：让元素同时具备行内级、块级元素的特征
• none : 隐藏元素

这里有个inline-block 行内块级元素

inline-block 特性:

• 可以让元素同时具备块级、行内级元素的特征
  • 跟其他行内级元素在同一行显示
  • 可以随意设置宽高
  • 宽高默认由内容决定
• 常见用途
  • 让行内级非替换元素（比如a、span等）能够随时设置宽高
  • 让块级元素（比如div、p等）能够跟其他元素在同一行显示

4 CSS属性 - visibility

• visibility，能控制元素的可见性，有2个常用值
  • visible：显示元素
  • hidden：隐藏元素
• visibility: hidden; 和 display: none; 的区别
  • visibility: hidden
    • 虽然元素看不见了，但元素的框依旧还留着，还会占着原来的位置
  • display: none;
    • 不仅元素看不见了，而且元素的框也会被移除，不会占着任何位置

5 注意点

• 块级元素、inline-block元素
  • 一般情况下，可以包含其他任何元素（比如块级元素、行内级元素、inline-block元素）
  • 特殊情况，p元素不能包含其他块级元素
• 行内元素（比如a、span、strong等）
  、inline-block元素）
  • 特殊情况，p元素不能包含其他块级元素
• 行内元素（比如a、span、strong等）
  • 一般情况下，只能包含行内元素