CSS基本原理入门

最新推荐文章于 2022-04-10 21:04:22 发布

H之一

最新推荐文章于 2022-04-10 21:04:22 发布

阅读量193

点赞数

分类专栏： css HTML 前端文章标签： css css3

本文链接：https://blog.csdn.net/H_zhiyi/article/details/108239570

版权

前端同时被 3 个专栏收录

39 篇文章 0 订阅

订阅专栏

HTML

11 篇文章 1 订阅

订阅专栏

css

8 篇文章 0 订阅

订阅专栏

1. 表格属性

属性名称	用途	取值
border-collapse	设置或检索表格的行和单元格的边是合并还是独立。	separate：边框独立 collapse：相邻边被合并
border-spacing	边框独立时，单元格与单元格之间的间距	数字，不允许负值
empty-cells	设置或检索当表格的单元格无内容时，是否显示该单元格的边框。	hide：隐藏该单元格的边框。 show：显示该单元格的边框。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格属性</title>
		<style>
		
			.separate{
				width: 200px;
				height: 200px;
				border-collapse:separate;
				border-spacing:10px;
				empty-cells: hide;
				}
		</style>
	</head>
	<body>
		<table border="1" class="separate">
			<tr  id="tr1">
				<td>separate--边框独立</td>
				<td>separate--边框独立</td>
				<td>separate--边框独立</td>
			</tr>
			<tr>
				<td>collapse--相邻边被合并</td>
				<td>collapse--相邻边被合并</td>
				<td></td>
			</tr>
		</table>
	</body>
</html>

在这里插入图片描述
2. 布局属性

属性名称	用途	取值
display	设置或检索对象是否及如何显示。	none：隐藏对象。不为被隐藏的对象保留其物理空间 block：指定对象为块元素
visibility	定义了元素是否可见	visible：设置对象可视保留物理空间 hidden：设置对象隐藏 collapse：主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于hidden。

float	定义了元素向左或者向右浮动放置	none：设置元素不浮动 left：设置元素浮在左边 right：设置元素浮在右边

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--
		<style>
		 .table{
				width: 300px;
				height: 300px;
				background-color: red;
				display: block;
			}
		   img{
		   	width: 300px;
		   	height: 300px;
		   	visibility: visible;
		   }
		</style>
		-->
		<style>
			.test{
				width: 300px;
				height: 300px;
				float: right;
				background-color: red;
			}
			.table{
				width: 300px;
				height: 300px;
				float: right;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div class="test">我将出现在屏幕右方1</div>
		<div class="table">我将出现在屏幕右方2</div>
		<br>
		<img src="css1.jpg"/>
	</body>
</html>

在这里插入图片描述
3. 定位属性

属性名称	用途	取值
position	指定一个元素在文档中的定位方式。	static：默认。 relative:相对定位[对象遵循常规流,不会影响常规流中的任何元素] absolute：绝对定位 [对象脱离常规流]
top	定义了元素的上外边距边界与其包含块上边界之间的偏移	数字，不允许负值
right	定义了元素的右外边距边界与其包含块右边界之间的偏移	数字，不允许负值
bottom	定义了元素的底外边距边界与其包含块底边界之间的偏移	数字，不允许负值
left	定义了元素的左外边距边界与其包含块左边界之间的偏移	数字，不允许负值
z-index	定义一个元素在文档中的层叠顺序	数字【数值越大就会在最上面】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--
		<style>
			#div1{
				width: 200px;
				height: 300px;
				background-color: red;
				position: absolute;
				top: 100px;
			}
			#div2{
				width: 200px;
				height: 200px;
				background-color: blue;
			}
		</style>
		-->
		<style>
			#test1,#test2,#test3,#test4 {
				position: absolute;
				width: 200px;
				height: 100px;
				padding: 5px 10px;
				color: #fff;
				text-align: right;
			}
			#test1{
				z-index: 1;
				font-size: 10px;
				background-color: red;
			}
			#test2{
				z-index: 2;
				font-size: 10px;
				top: 30px;
				left: 30px;
				background-color: blue;
			}
			#test3{
				z-index: 3;
				font-size: 10px;
				top: 60px;
				left: 60px;
				background-color: black;
			}
			#test4{
				z-index: 4;
				font-size: 10px;
				top: 90px;
				left: 90px;
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<!--
		<div id="div1">	
		</div>
		<div id="div2">	
		</div>
		-->
		<div id="test1">z-index:1</div>
		<div id="test2">z-index:2</div>
		<div id="test3">z-index:3</div>
		<div id="test4">z-index:4</div>
	</body>
</html>

在这里插入图片描述
变换属性设置
2D Transform Functions：
matrix()：【矩阵变换】以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵
translate()：指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
scale()：指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值
rotate()指定对象的2D rotation（2D旋转），需先有 &lt’’ transform-origin '> 属性的定义
3D Transform Functions：
matrix3d()：以一个4x4矩阵的形式指定一个3D变换
translate3d()：
指定对象的3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略
rotate3d()：指定对象的3D旋转角度，其中前3个参数分别表示旋转的方向x,y,z，第4个参数表示旋转的角度，参数不允许省略
scale3d()：指定对象的3D缩放。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>2D变换</title>
		<style>
			#div1{
				width: 200px;
				height: 200px;
				background-color: red;
				-webkit-transform:matrix(0,1,1,1,10,10);
			}
			/*
			   1. 正常值为1，定义的是 scaleX 通过设置 X 轴的值来定义缩放。值：>=0
			   2. 正常值为0，定义的是 skew 定义 2D 倾斜
			   3. 正常值为0，定义的是 rotate 定义2D 旋转角度
               4. 正常值为1，定义的是 scaleY 通过设置 Y 轴的值来定义缩放。值：>=0
               5. 正常值为0，定义的是 translateX 通过设置 X 轴的值来定义左右位移。值：任意
               6. 正常值为0，定义的是 translateY 通过设置 Y 轴的值来定义上下位移。值：任意
			 */
			#div2{
				width: 200px;
				height: 200px;
				background-color: red;
				transition:all 1s;
			}
			#div2:hover{
				-webkit-transform:translate(100px,100px);
			}
			/*
			   translate(100px,100px)平移
			   参数1--X轴的移动距离
			   参数2--Y轴的移动距离
			*/
			#div3{
				width: 200px;
				height: 200px;
				background-color: red;
				transition:all 1s;
			}
			#div3:hover{
				 -webkit-transform:scale(2,0.5);
			}
			/*
				transform:scale(2,0.5);---缩放
				参数1--x轴的收缩比例【元素的宽度的倍数】
				参数2--y轴的收缩比例【元素的高度的倍数】
			*/
		   #div4{
		   	width: 200px;
		   	height: 200px;
		   	background-color: red;
		   	transition:all 1s;
		   }
		   #div4:hover{
			 transform-origin:50% 50%;
		   	 -webkit-transform:rotate(-45deg);
		   }
		   /*
			rotate(-45deg);旋转
			参数--旋转角度【deg】
			需要transform-origin:50% 50%;制定旋转的参考点。
		   */
		  #div5{
		  	width: 200px;
		  	height: 200px;
		  	background-color: red;
		  	transition:all 3s;
		  }
		  #div5:hover{
		  			 transform-origin:50% 50%;
					 -webkit-transform:translate(300px,300px) rotate(-45deg) scale(2,0.5);
		  }
		</style>
	</head>
	<body>
		<!--<div id="div1"></div>-->
		<div id="div2"></div>
		<hr>
		<div id="div3"></div>
		<hr>
		<div id="div4"></div>
		<hr>
		<div id="div5"></div>
	</body>
</html>

在这里插入图片描述