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