热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

CSS3的盒子类型

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类型,这个类型呢就可以把我们的目标元素设置为不显示啦~


推荐阅读
author-avatar
技术潜行者
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有