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

一.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外框之间的间隙

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,845评论 1 92
  • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
    剑残阅读 9,731评论 0 8
  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 3,216评论 0 11
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,660评论 32 459
  • 同学们: 在一个新的学校里,你们过得好吗? 本来这是一封早就应该写的信,有许多话早应该说,但是我没有去写,没有去说...
    CooperNiu阅读 1,335评论 7 9