HTML元素的显示模式

元素的显示模式

　　元素的显示模式就是元素以什么方式进行显示，比如div自己占一行，一行可以放多个span

　　我们可以把html标签分为两大类：块元素、行内元素

块元素

　　常见的块元素标签有h、p、div、ul、ol等，div是最常见的块元素

　　块元素的特点：

　　　　•自己独占一行

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

　　　　•宽度默认是父级宽度的100%

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

　　需要注意的是h和p这种文字标签标签不能再放块级元素了

行内元素

　　常见的行内元素有a、strong、b、em、i、span等，span是最常见的行内元素

　　行内元素的特点：

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

　　　　•高、宽直接设置是无效的

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

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

　　需要注意的是链接里面不能放链接，链接a里面可以放块级元素

行内块元素

　　行内元素中有几个特殊的标签——img、input、td，他们同时具有行内元素和块元素的特点，有些资料称之为行内块元素。

　　行内块元素的特点：

　　　　•相邻元素在一行上，但他们会有空白间隙。一行可以显示多个

　　　　•默认宽度就是他们本身的宽度

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

显示模式的切换

　　如果一个模式的元素需要另一个模式的特性。

转块元素

　　如果我们想要增加a标签的触发范围，需要把行内元素a转化为块元素

　　我们就要在a标签的样式表里加上display： block；

 　　经过这样设置后，整个a标签的区域都可以跳转链接，并且可以设置宽度和高度

转行内元素

　　如果我们想把div转为行内元素，就要在样式表里加上display： inline；

 　　经过这样设置div就是行内元素了，可以在一行放多个div

转行内块元素

　　如果想给span设置宽度和高度，我们可以把span转为行内块元素。

　　我们可以在样式表加上display:  inline-block;

 　　这样就可以把元素转化为行内块元素