浅谈css的行内类型标签和块级标签

常用标签的行内类型标签有：a、span、img；块级标签有：div、p、h1~6、ul、ol、li、dl、dt、dd。

行内类型标签的特征：标签的大小由标签的内容决定，不能设置width和height，不会自动换行。

块级标签的特征：可以设置width和height，会自动换行。

行内类型标签还有一个特点就是：在同一行上每个标签之间有间隙。

a标签的现象：

 

p标签的现象：

 

img标签的现象：

 

解决这一现象最简单的办法就是将两个标签写在同一行。导致这一现象的原因还有待研究。

同样是行内标签，现在想给他们设置width和height，其中的一种方式就是给他们设置display:inline-block;但是这种方式也会导致和上面一样的现象有间隙。

解决这一现象有两种方式：1.将两个标签写在同一行；2.不采用display的方式，采用浮动的方式。因为浮动也可以将行内类型转换为块级类型，而且没有间隙。

块级标签，现在给他们设置display:inline-block;想让他们都在同一行上，这种方式也会导致标签之间有间隙，解决的两种办法同上。

也就是说当给行内标签和块级标签设置display:inline-block这个属性时，标签之间都会出现间隙。

注意：给一个标签同时设置display和float没有任何意义。也就是说display和float不要混用。

设置元素的几种类型：

display:inline;-------------------->将元素设置为行内类型，此时元素在同一行内，不会自动换行，不能设置width和height；

display:block;-------------------->将元素设置为块级类型，此时元素自动换行，可以设置width和height；

diaplay:inline-block;------------>将元素设置为内联块（行内块），此时元素在同一行内，不会自动换行，但是可以设置width和height；

display:none;--------------------->不占位隐藏。将元素隐藏，不显示；

visibility: hidden;----------------->占位隐藏。将元素隐藏，但是元素还占用着那个位置。

 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有