#博学谷IT学习技术支持#
目录
盒子模型
我们所用到的标签,全都可以看做是一个盒子,里面的内容可以看做是盒子里的物品,如果标签里面嵌套的有别的标签,那就可以看成是大盒子里面的小盒子,能够设置宽高的我们称之为块级标签,一个标签占据一行,不能设置宽高的我们成为行内标签,多个标签可以占据一行显示,但是有些时候我们就需要让多个块级标签显示在一行,行内标签独占一行怎么办呢,这就要用到我们的元素显示模式转换,display。
元素显示模式转换
元素显示模式转换,display,上面我们提到,想要把多个块级元素设置在一行显示,把行内元素独占一行,我们就给需要的盒子设置display属性,属性值设置成 block ,就可以独占一行,具有块级元素的特点,同时也可以设置宽高等属性,而属性值设置成 inline ,就可以实现多个行内元素显示在一行,具备行内元素的特点,同时也不能设置宽高了,或者说设置宽高是不生效的。可以看一下下图示例:
这个是正常情况下,三个div盒子(块级元素)的排列情况,三个盒子均是独占一行的,且可以设置宽高,下面来看一下,设置成 display:inline;的情况:
可以看到,前两个盒子设置了display:inline;之后,具有行内元素的特点,但是设置的宽高已经不生效了,如果只给一个盒子设置display:inline;属性,相当于第一个盒子同意排在一行,但是其他的不同意,显示结果还是独占一行,下面我们来看行内元素如何独占一行:
还是先看正常情况,这里是三个span盒子(行内元素),不加display:block;属性是排列在一行的