CSS核心属性详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_49344258/article/details/108245021

一、CSS的基本属性2

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">
				<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>
			.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="imgs/avatar04.png"/>
	</body>
</html>

3、定位属性

属性名称

用途

取值

position

指定一个元素在文档中的定位方式。

static：默认。

relative:相对定位[对象遵循常规流,不会影响常规流中的任何元素]

absolute：绝对定位 [对象脱离常规流]

top

定义了元素的上外边距边界与其包含块上边界之间的偏移

数字，不允许负值

right

定义了元素的右外边距边界与其包含块右边界之间的偏移

数字，不允许负值

bottom:

定义了元素的底外边距边界与其包含块底边界之间的偏移

数字，不允许负值

left:

定义了元素的左外边距边界与其包含块左边界之间的偏移

数字，不允许负值

z-index:

定义一个元素在文档中的层叠顺序

数字【数值越大就会在最上面】

4.变换属性设置

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旋转），需先有 <' 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>