CSS标签显示模式

Posted 2022-01-16 shadowplay

标签显示模式

一）块级元素（block-level）

每个块级元素都会独自占一行或者多行，可以对其设置宽度（默认是容器的100%）、高度及对齐等，

可以容纳内联元素或者其他块元素（p、h1不要包裹其他块级元素）。

典型的又：div、table、ul、p、h1等。

二）内联元素（inline-level）

内联元素不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度(默认为本身内容的宽度)、高度、对齐等属性，

但水平方向上的padding和margin可以设置，只能放文本和其他行内元素（a除外）。

典型的有:span、strong、em等。

三）行内块元素（inline-block）

属于行内元素的特殊标签---img、input、td，可以对它们设置宽高和对齐属性。

四）标签显示模式的转换（display）

1.块转行内： display:inline

2.行内转块： display:block

3.转换为行内块： display:inline-block

在设置样式的时候行内元素，行内块元素可以当作文本来看（可以设置text-align该变其位置），块级元素不行。