CSS属性

本文深入讲解CSS中的visibility、opacity及cursor等属性的应用,探讨不同定位方式的特性,并解析背景图片定位技巧,适合初学者和进阶者巩固CSS基础。

一、visibility属性

	display:none  :隐藏元素
	visibility(显示/隐藏的)
	属性值:
	1 visible :默认的可见的
	2 hidden  :隐藏 依然占据页面空间
	3 collapse :使用在表格元素上 删除一行和一列的时候不影响表格的整体布局
	display 和 visibility  区别
		display:none不占有之前的位置 脱离文档流
		visibility:hidden  占有之前的位置,不脱离文档流导致空间依然存在

二、opacity属性

作用:改变元素的透明度
取值范围为:0-1  
0 全透明  1 不透明

三、改变光标的属性

属性 cursor
属性值:	
	default:默认的  箭头
	pointer:小手
	crosshair:加号
	text:文本  I
	wait:等待 小圆圈
	help:帮助  箭头加?

四、定位属性

1.语法:position:
		1.static 默认的
		2.relative 相对定位
			元素会相对于元素原来的位置的左上角进行位置偏移
			相对定位是占有之前的位置空间的
		3.absolute 绝对定位
			元素不会占有之前的位置(脱离了文档流),
			绝对定位的元素相对于它最近的已有定位的父级及以上元素进行位置偏移,

在这里插入图片描述
在这里插入图片描述
如果没有已经有定位的父级相对于最初的body进行位置偏移
4.fixed 固定定位
将元素固定在页面的某个地方,不会随着滚动条变化而发生变化
注意:
脱离了文档流
是随着页面的body标签的左顶点进行位置偏移的

五 背景图片定位(雪碧图或者精灵图)

语法:background-position;
属性值可以用 X%  y%表示
			 0% 0%左上角
			 50% 50%背景中间
			 100% 100% 右下角

到此,CSS基础部分我们学习完毕,剩下的时间里,我们要不断的去练习,熟悉每一个知识点,把基础打牢固,只有这样我们才能走的更远,对后面的学习才能有更大的帮助,加油祝福每一个走上代码之路的人。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值