一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

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;">


	
	
	



导航
导航
导航
导航
导航
导航


热门栏目