CSS学习2

最新推荐文章于 2025-04-30 01:11:37 发布

dingxiaozhuang

最新推荐文章于 2025-04-30 01:11:37 发布

阅读量150

点赞数

文章标签： css

本文链接：https://blog.youkuaiyun.com/Judith__/article/details/107926923

版权

1、边框
（1）单个边加边框

<style type="text/css">
	h1{
		/*单个边加边框*/
		border-left:15px solid blue;/*15px表示像素 solid表示实线 blue表示线条的颜色*/
		border-top:13px dashed orange;/*dashed表示虚线*/
		border-bottom:10px solid red;
	}
	h1{/*就近原则，下面的会覆盖掉上面的内容*/
		/*2、四个边同时加边框*/
		border:5px solid pink;
	}
	p{
	border:3px solid blue;
	width:500px;
	height:50px;
	/*overflow:hidden;把溢出的部分隐藏掉，位置也会释放*/
	/*overflow:visible;溢出部分可见*/
	overflow:auto;/*高度自适应*/
	}
</style>

（2）box
padding:内边距，边框与内容之间的距离；
margin:外边距，边框和边框之间的距离。

<style>
	div{
		width:100px;
		height:100px;
		border:1px solid red;
		/*外边距：复合写法上右下左*/
		margin:20px;/*外边距*/
	}
	/*1、四个边框设置相同的边距*/
	#d0{
		/*内边距*/
		padding-left:30px;
		padding-top:30px;
		/*加内边距后不影响宽高的效果*/
		box-sizing:border-box;
	}
	/*2、四个边框设置不同的边距*/
	#d2{
		/*上 右 下 左*/
		padding:10px 20px 30px 40px;
		margin:10px 20px 30px 40px;
	}
	/*3、对称设置边距*/
	#d4{
	/*上下  左右*/
	padding:20px 40px;
	margin:30px 40px;
	}
	/*4、对称边距的一个特例
	当左右外边距设置为auto，元素会水平居中，以页面为范围自适应
	*/
	#d5{
	margin:20px auto;
	}
</style>
<body>
	<div id="d0">d0</div>
	<div id="d0">d1</div>
	<div id="d0">d2</div>
	<div id="d0">d3</div>
	<div id="d0">d4</div>
	<div id="d0">d5</div>

（3）背景
背景图：background-image
背景的铺展方向：background-repeat：repeat-x;/以x周方向铺展开来/
背景图放的位置：background-position:center;/图片放在中间位置/
简化方式设置背景：background:背景颜色图片平铺位置
例：background:red url(images/01.png) repeat right;
固定背景图：background-attcahment:fixed;
/* fixed：当页面其余部分滚动时，背景图像不会移动

srcoll:默认值，背景图像会随着页面其余部分的滚动而移动
inherit:规定应该从父元素继承backgound-attachment设置的属性
*/
（4）文本样式

<style>
	h1,p{
		border:1px solid pink;/*边框为1像素 实线 粉红色*/
		width:500px;/*边框宽度*/
	}
	p{
		font-size:24px;/*p段落的字体大小为24*/
	}
	h1{
		width:300px;
		height:200px;
		text-align:center;/*center文本在行中间,left:文本排列到左边，right:文本排列在右边，justify:实现两端对齐文本效果*/
		line-height:200px;/*文本在高度之间*/
	}
	p{
		line-height:2em;/*行高之间的距离，2em表示行与行之间的距离为2个字符的距离*/
		text-indent:2em;/*首行缩进2个字符的距离*/
	}
</style>

（5）浮动
float属性定义元素朝着那个方向浮动。可以应用于任何元素。
left:元素向左浮动；right:元素向右浮动；none:默认值，元素不不浮动，炳辉在其文本中出现的位置。

	<style>
		#d{
			width:800px;
			border:1px solid red;
		}
		#d>div{
			width:100px;
			height:100px;
			border:1px solid green;
			margin:5px;
			float:left;/*d中的div块向左浮动*/
		}
	</style>

（6）定位
相对定位、绝对定位、固定定位：

	<style>
		#d1{
			width:100px;
			height:100px;
			background:pink;
			/**定义定位的类型 相对定位*/
			position:relative;/*标记记号，子元素以有元素为标准进行偏移*/
			/*相对原来的位置距离上位置20px*/
			top:20px;
			left:10px;
		}
		/*2、绝对定位：根据父元素来绝对自己的位置，除body外，其余父元素需要加position:relative;作为子元素绝对定位的参照物*/
		#d2{
			width:100px;
			height:100px;
			background:red;
			margin:20px;/*上边距*/
			/*依照父元素来进行定位的，如果没有父元素，就用body进行定位*/
			position:relative;
			left:20px;/*根据父元素来决定自己的位置*/
			top:10px;/*距离上20px*/
		}
		/*固定定位*/
		.c2{
			width:35px;
			height:40px;
			background:pink;
			position:fixed;
			right:50px;
			bottom:10px;/*必须写一个具体的位置才能在滚动的时候确定*/
		}
	</style>

（7）堆叠样式

<style type="text/css">
	img{
		width:300px;
		height:300px;
	}
	#img1{
		background:#FFCCCC;
		position:absolute;
		z-index:3;/*index的值越大，就会越靠近上面*/
	}
	#img2{
		background:#FFCC99;
		position:absolute;
		top:30px;
		left:60px;
		z-index:1;
	}
	#img3{
		background:#99CC66;
		position:absolute;
		top:90px;
		left:110px;
		z-index:0;
	}
	.d{
		margin:20px auto;
		width:300px;
		height:500px;
		background:#F6B5B3;
		position:relative;
	}
	#img1,#img2,#img3:hover{
		z-index:999;
	} 
</style>

（8）元素的显示方式

<style type="text/css">
	p{
		display: inline;/*块元素转变为行元素*/
	}
	span{
		display: none;/*行元素转变为块元素*/
	}
	div{
		display: none;/*不显示*/
	}
	div{
		display: block;/*显示*/
	}
</style>

（9）抖动效果

		/*实现抖动效果（采用相对定位）*/
		img:hover{
			position: relative;
			left:2px;/*向右抖动2px*/
			bottom:2px;/*向上抖动2px*/
		}