块级、行内级元素
- 根据元素的显示类型，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等
替换、非替换元素
- 根据元素的内容类型，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等
元素的分类总结
image.png
CSS属性 - display
- CSS中有个display属性，能修改元素的显示类型，有4个常用值
-
block：让元素显示为块级元素
-
inline：让元素显示为行内级元素
-
none：隐藏元素
-
inline-block：让元素同时具备行内级、块级元素的特征
-
inline-block
可以让元素同时具备块级、行内级元素的特征
跟其他行内级元素在同一行显示
可以随意设置宽高
宽高默认由内容决定
可以理解为
对外来说，它是一个行内级元素
对内来说，它是一个块级元素
常见用途
让行内级非替换元素（比如a、span等）能够随时设置宽高
让块级元素（比如div、p等）能够跟其他元素在同一行显示
CSS属性 - visibility
visibility，能控制元素的可见性，有2个常用值
visible：显示元素
hidden：隐藏元素
visibility: hidden; 和 display: none; 的区别
visibility: hidden;
虽然元素看不见了，但元素的框依旧还留着，还会占着原来的位置
display: none;
不仅元素看不见了，而且元素的框也会被移除，不会占着任何位置
CSS属性 - overflow
-
overflow用于控制内容溢出时的行为
- visible：溢出的内容照样可见
- hidden：溢出的内容直接裁剪
- scroll：溢出的内容被裁剪，但可以通过滚动机制查看
会一直显示滚动条区域，滚动条区域占用的空间属于width、height - auto：自动根据内容是否溢出来决定是否提供滚动机制
overflow用于控制内容溢出时的行为
visible：溢出的内容照样可见
hidden：溢出的内容直接裁剪
scroll：溢出的内容被裁剪，但可以通过滚动机制查看
会一直显示滚动条区域，滚动条区域占用的空间属于width、height
auto：自动根据内容是否溢出来决定是否提供滚动机制
块级元素、inline-block元素
一般情况下，可以包含其他任何元素（比如块级元素、行内级元素、inline-block元素）
特殊情况，p元素不能包含其他块级元素
行内级元素（比如a、span、strong等）
一般情况下，只能包含行内级元素
网友评论