前端CSS表格的基本属性 css table表格
qiyuwang 2024-10-18 10:30 10 浏览 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旋转），需先有 <’’ 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>
相关推荐
- # 安装打开 ubuntu-22.04.3-LTS 报错 解决方案
-
#安装打开ubuntu-22.04.3-LTS报错解决方案WslRegisterDistributionfailedwitherror:0x800701bcError:0x80070...
- 利用阿里云镜像在ubuntu上安装Docker
-
简介：...
- 如何将Ubuntu Kylin(优麒麟)19.10系统升级到20.04版本
-
UbuntuKylin系统使用一段时间后，有新的版本发布，如何将现有的UbuntuKylin系统升级到最新版本？可以通过下面的方法进行升级。1.先查看相关的UbuntuKylin系统版本情况。使...
- Ubuntu 16.10内部代号确认为Yakkety Yak
-
在正式宣布Ubuntu16.04LTS(XenialXerus)的当天，Canonical创始人MarkShuttleworth还非常开心的在个人微博上宣布Ubuntu下个版本16.10的内...
- 如何在win11的wsl上装ubuntu（怎么在windows上安装ubuntu）
-
在Windows11的WSL（WindowsSubsystemforLinux）上安装Ubuntu非常简单。以下是详细的步骤：---...
- Win11学院:如何在Windows 11上使用WSL安装Ubuntu
-
IT之家2月18日消息，科技媒体pureinfotech昨日（2月17日）发布博文，介绍了3中简便的方法，让你轻松在Windows11系统中，使用WindowsSubs...
- 如何查看Linux的IP地址（如何查看Linux的ip地址）
-
本头条号每天坚持更新原创干货技术文章，欢迎关注本头条号"Linux学习教程"，公众号名称“Linux入门学习教程"。...
- 怎么看电脑系统?（怎么看电脑系统配置）
-
要查看电脑的操作系统信息，可以按照以下步骤操作，根据不同的操作系统选择对应的方法：一、Windows系统通过系统属性查看右键点击桌面上的“此电脑”（或“我的电脑”）图标，选择“属性”。在打开的...
- 如何查询 Linux 内核版本?这些命令一定要会!
-
Linux内核是操作系统的核心，负责管理硬件资源、调度进程、处理系统调用等关键任务。不同的内核版本可能支持不同的硬件特性、提供新的功能，或者修复了已知的安全漏洞。以下是查询内核版本的几个常见场景：...
- 深度剖析:Linux下查看系统版本与CPU架构
-
在Linux系统管理、维护以及软件部署的过程中，精准掌握系统版本和CPU架构是极为关键的基础操作。这些信息不仅有助于我们深入了解系统特性、判断软件兼容性，还能为后续的软件安装、性能优化提供重要依据。接...
- 504 错误代码解析与应对策略（504错误咋解决）
-
在互联网的使用过程中，用户偶尔会遭遇各种错误提示，其中504错误代码是较为常见的一种。504错误并非意味着网站被屏蔽，它实际上是指服务器在规定时间内未能从上游服务器获取响应，专业术语称为“Ga...
- 猎聘APP和官网崩了?回应:正对部分职位整改，临时域名可登录
-
10月12日，有网友反映猎聘网无法打开，猎聘APP无法登录。截至10月14日，仍有网友不断向猎聘官方微博下反映该情况，而猎聘官方微博未发布相关情况说明，只是在微博内对反映该情况的用户进行回复，“抱歉，...
- 域名解析的原理是什么?域名解析的流程是怎样的?
-
域名解析是网站正常运行的关键因素，因此网站管理者了解域名解析的原理和流程对于做好域名管理、解决常见解析问题，保障网站的正常运转十分必要。那么域名解析的原理是什么？域名解析的流程是怎样的？接下来，中科三...
- Linux无法解析域名的解决办法（linux 不能解析域名）
-
如果由于误操作，删除了系统原有的dhcp相关设置就无法正常解析域名。 此时，需要手动修改配置文件： /etc/resolv.conf 将域名解析服务器手动添加到配置文件中 该文件是DNS域名解...
- 域名劫持是什么?（域名劫持是什么）
-
域名劫持是互联网攻击的一种方式，通过攻击域名解析服务器（DNS），或伪造域名解析服务器（DNS）的方法，把目标网站域名解析到错误的地址从而实现用户无法访问目标网站的目的。说的直白些，域名劫持，就是把互...
欢迎 你 发表评论:
- 一周热门
- 最近发表
-
- # 安装打开 ubuntu-22.04.3-LTS 报错 解决方案
- 利用阿里云镜像在ubuntu上安装Docker
- 如何将Ubuntu Kylin(优麒麟)19.10系统升级到20.04版本
- Ubuntu 16.10内部代号确认为Yakkety Yak
- 如何在win11的wsl上装ubuntu（怎么在windows上安装ubuntu）
- Win11学院:如何在Windows 11上使用WSL安装Ubuntu
- 如何查看Linux的IP地址（如何查看Linux的ip地址）
- 怎么看电脑系统?（怎么看电脑系统配置）
- 如何查询 Linux 内核版本?这些命令一定要会!
- 深度剖析:Linux下查看系统版本与CPU架构
- 标签列表
-
- navicat无法连接mysql服务器 (65)
- 下横线怎么打 (71)
- flash插件怎么安装 (60)
- lol体验服怎么进 (66)
- ae插件怎么安装 (62)
- yum卸载 (75)
- .key文件 (63)
- cad一打开就致命错误是怎么回事 (61)
- rpm文件怎么安装 (66)
- linux取消挂载 (81)
- ie代理配置错误 (61)
- ajax error (67)
- centos7 重启网络 (67)
- centos6下载 (58)
- mysql 外网访问权限 (69)
- centos查看内核版本 (61)
- ps错误16 (66)
- nodejs读取json文件 (64)
- centos7 1810 (59)
- 加载com加载项时运行错误 (67)
- php打乱数组顺序 (68)
- cad安装失败怎么解决 (58)
- 因文件头错误而不能打开怎么解决 (68)
- js判断字符串为空 (62)
- centos查看端口 (64)