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等
- 替换元素(replaced elements)
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;
- 不仅元素看不见了,而且元素的框也会被移除,不会占着任何位置
- visibility: hidden
5 注意点
- 块级元素、inline-block元素
- 一般情况下,可以包含其他任何元素(比如块级元素、行内级元素、inline-block元素)
- 特殊情况,p元素不能包含其他块级元素
- 行内元素(比如a、span、strong等)
、inline-block元素)- 特殊情况,p元素不能包含其他块级元素
- 行内元素(比如a、span、strong等)
- 一般情况下,只能包含行内元素