第七天:position定位、表格—table标签

本文详细介绍了CSS中四种不同的定位方式(static、relative、absolute、fixed),并解释了它们的特点及应用场景。此外,还涉及了如何使用table标签创建表格,并展示了基本的表格结构和属性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一.position定位(relative | absolute | fixed | static)

1.position: static;

position 的默认值,元素没有设置定位时的原有默认值。

2.position: relative; 相对定位

(1)相对元素的当前自身位子进行定位偏移;

(2)不会改变元素的默认表现;

(3)主要用于绝对定位的组合,帮助绝对定位确定坐标.

3.position: absolute;   绝对定位

(1)定在文档中的某个位置,不会改变;

(2)设置了绝对定位的元素,如果父级元素没有设置absolute或者relative或者fixed,那么该元素会以文档进行偏移,如果父级元素设置了absolute或者relative或者fixed,那么该元素会以父级元素进行偏移 。

4.position:fixed;      固定定位

(1)固定定位会改变元素的行标签和块标签的表现,如:行级标签定位后就可以设置宽高了  参考float;

(2)一但给元素设定固定定位,float浮动就没有效果了;

(3)以浏览器视窗定位的一种方式,可以设置负数。

拓展:

1.position:absolute | relative |fixed;

left:0;

right:0;

top:0;

bottom:0;

当出现四个方向时, 右 和 下 不生效;

2.border-radius:  ;设置圆角度

border-top-left-radius:    ;  border-top-right-radius:     ;    等设置相邻两边间的圆角度。

3.float浮动、position定位(absolute) 可以使文档脱离文档流;

4.背景图片、背景图片位移、背景图片尺寸、背景图片平铺的简写:

background: background-image   background-position / background-size   background-repeat;

二.表单—table标签

1.table 表格 双标签  表格级

th 行头

tr定义行数

td 单元格

<tr>

     <th></th>

     <td></td>

    <td></td>

</tr>

2. rowspan、colspan、collapse

rowspan   合并行数

colspan  合并列数

border-collapse:collapse;合并单元格边线以及table外框之间的间隙

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值