作者:技术潜行者 | 来源:互联网 | 2023-07-25 14:40
CSS3的盒子类型首先呢,我们要知道css3中用display属性来描述盒子的类型滴。像block类型和inline类型都是基本的盒子模型。常见的div和p标签默认就是block
CSS3的盒子类型
首先呢,我们要知道css3中用display属性来描述盒子的类型滴。
像block类型和inline类型都是基本的盒子模型。
常见的div和p标签默认就是block类型,而a和span默认的就是inline类型。
我分别给div元素和span元素添加了背景颜色,这样就可以看到block和inline的区别啦~
通过在项目里经验,我们经常会遇到不希望目标元素被块元素“挤”到下面的情况,这个时候我们就会想到inline类型啦,但是!inline类型木有办法给目标元素设置宽高,这时候inline-block类型就在召唤我们~
inline-block类型就结合了两者的特点,对外面的其他元素来说它是inline的,不会被“挤”到下面去滴,但是对内呢,它的子元素就是block的啦,可以给他们设置宽高,完美解决了我们的问题~~
在项目中我们经常用到表格table,table也相当于一个块,他会把他上下的元素给挤走,一个人独占一片。为了阻止这种霸道的行为,我们有inline-table类型,这个类型就相当与inline-block类型啦,只不过它是针对于table滴。
这里再介绍一个list-item类型,它呢就可以把多个元素作为一个列表来显示啦,并且可以用list-style-type来加上列表开头的标记~
还有一个使用的特别多的类型,就是none类型,这个类型呢就可以把我们的目标元素设置为不显示啦~