CSS知识补足——元素的显示模式知识

定义：元素的显示模式就是元素（标签）以什么方式进行显示，比如div 自己占一行，一行中可以放多个span元素，HTML5元素一般分为 块元素，和行内元素两种类型。

块级元素的特点：

• 自己独占一行。

• 高度、宽度、外边距以及内边距都可以控制。

• 宽度默认是容器（父级宽度）的100%

• 是一个容器及盒子，里面可以放行内或者块级元素。

• 文字类的元素内部不能使用块级元素

 

行内元素的特点：

• 相邻的行内元素在一行上，一行可以显示多个。

• 高度宽度直接设置是无效的。

• 默认宽度就是他本身内容的宽度

• 行内元素只能容纳文本或其他行内元素

• 连接里面不能再放连接

• 特殊情况：a 里面可以放块级元素，但是最好给a转化一下块级模式这样比较安全

 

行内块元素特点：

在行内元素中有几个特殊的标签——img input td 他们同时具有块元素和行内元素的特点。

• 和相邻的行内块元素在一行上，但是他们之间会有空白缝隙。一行可以显示多个。

• 默认宽度就是它本身内容的宽度

• 高度，行高，外边距以及内边距都可以控制

 

元素模式之间的转换

1. 转为块元素

display:block;

2. 转为行内元素

display:inline;

3. 转为行内块元素

display:inline-block