CSS

本文介绍了CSS中的选择器组合使用,子标签选择器以及图片样式的设定,包括尺寸、旋转、过渡效果。接着探讨了盒子模型,详细阐述了div标签的特性以及外边距、边框、内边距和内容区域的作用。最后讲解了CSS定位,包括相对定位、绝对定位和固定定位,以及z-index的应用,帮助理解元素的显示层级。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

css的声明

在这里插入图片描述

css选择器

在这里插入图片描述
组合选择器:
选择器1,选择器2,…{样式1:样式值1;样式2:样式值2;…}
作用:解决不同的选择器之间重复样式的问题
table , #id{
table标签选择器,和id选择器样式一样,则使用组合选择器一起书写
}

子标签选择器:
p a{
p标签底下a标签的样式
}
在这里插入图片描述

CSS一些样式

在这里插入图片描述

/设置图片样式/
img{
width: 12%;/设置高度/
padding: 10px;/设置内边距/
background-color: white;/设置背景颜色/
transform: rotate(-10deg);/设置倾斜角度/
margin: 20px;/设置外边距/
}
/使用伪类给标签添加样式/
img:hover{
transform: rotate(0deg) scale(1.5);/设置旋转角度和缩放比例/
z-index: 1;/设置显示优先级别/
transition: 1.5s;/设置显示加载时间/
}

css的盒子模型学习:

     	div标签:
       块级标签,主要是用来进行网页布局的,会将其中的子元素内容作为一个独立的整体存在。
				特点:
					默认宽度是页面的宽度,但是可以设置。
					高度默认是没有的,但是可以设置。(可以顶开)
					如果子元素设置了百分比的高或者宽,占据的是div的百分比,不是页面的。
			盒子模型:
				外边距:margin
					作用:用来设置元素和元素之间的间隔。
					居中设置:margin:0px auto;上下间隔是0px,水平居中。
					可以根据需求单独的设置上下左右的外边距。
				边框:border
					作用:用来设置元素的边框大小
					    可以单独设置上下左右
				内边距:padding
					作用:设置内容和边框之间的距离
					注意:内边距不会改变内容区域的大小
					可以单独的设置上下左右的内边距
				内容区域:
					作用:改变内容区域的大小。
					设置宽和高即可改变内容区域的大小。

css的定位学习:

			position
				相对定位:relative
					作用:相对元素原有位置移动指定的距离(相对的自己的原有位置)	
						可以使用top,left,right,bottom来进行设置。
					注意:
						其他元素的位置是不改变的。
				绝对定位:absolute
					作用:可以使用元素参照界面或者相对父元素来进行移动 	
					注意:
						如果父级元素成为参照元素,必须使用相对定位属性
						默认情况下是以界面为基准进行移动的。
				固定定位:fixed
					作用:将元素固定现在页面的指定位置,不会随着滚动条的移动而改变位置。
				以上定位都可以使用top,left,right,bottom来进行移动。
			z-index:此属性是用来声明元素的显示级别的。

display

display:none隐藏元素,并且删除元素
display:inline设置为内联元素
display:block设置为块级元素
像、

  • 都是块级元素
    等都是内联元素
    内联元素和其他内联元素保持在同一行,并不会发生换行
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值