前言：
此时姐妹们对“html表格属性”大概比较讲究，看官们都想要了解一些“html表格属性”的相关内容。那么小编同时在网络上搜集了一些对于“html表格属性””的相关知识，希望咱们能喜欢，兄弟们一起来学习一下吧！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> 标签： #html表格属性
