最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
CSS标签中的显示模式代码解析
时间:2022-06-25 14:06:28 编辑:袖梨 来源:一聚教程网
本篇文章小编给大家分享一下CSS标签中的显示模式代码解析,对大家的学习有一定的帮助,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。
标签的显示模式(重点)
div和span标签
1.样式完全相同,标签不同,显示的结果完全不同
2.每个div会独占一行,多个span会并列一排
1.块元素
特点:宽度默认是100%,高度默认是0,可以设置宽度和高度,会继承父级的宽度,换行显示—div ul li p h
示意图
总结:块元素可以添加宽高的属性,独占一行
2.行元素
特点:宽高默认都是0,不能设置宽和高,一行显示----span b i u a
示意图
总结:对宽高不敏感,不能独占一行
3.行内的块元素
特点:只能设置宽和高,不能换行显示—img input
示意图
多学一招:从大的方面来说,其实行内的块元素也属于行内元素,对行内元素的某些操作,同样可以操作行内的块元素,例:text-align:center;line-
4.模式转换
语法:display:值
取值:block转成块元素,inline转成行元素,inline-block转成行内的块元素,none隐藏元素
多学一招:使用该属性隐藏元素后,在页面中将不占据空间
小案例:简易导航的制作
案例示意图
代码
css;">导航 导航 导航 导航 导航 导航
相关文章
- 王者荣耀侦探能力大测试攻略 王者荣耀侦探能力大测试怎么过 11-22
- 无期迷途主线前瞻兑换码是什么 11-22
- 原神欧洛伦怎么培养 11-22
- 炉石传说网易云音乐联动怎么玩 11-22
- 永劫无间手游确幸转盘怎么样 11-22
- 无期迷途主线前瞻兑换码是什么 无期迷途主线前瞻直播兑换码介绍 11-22