最新下载
热门教程
- 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;">导航 导航 导航 导航 导航 导航
相关文章
- 《弓箭传说2》新手玩法介绍 01-16
- 《地下城与勇士:起源》断桥烟雨多买多送活动内容一览 01-16
- 《差不多高手》醉拳龙技能特点分享 01-16
- 《鬼谷八荒》毕方尾羽解除限制道具推荐 01-16
- 《地下城与勇士:起源》阿拉德首次迎新春活动内容一览 01-16
- 《差不多高手》情圣技能特点分享 01-16