视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
css样式布局中position的那些事儿_html/css
2020-11-27 15:56:18 责编:小采
文档
哎,页面布局及设计开发,对于一个一直从事后台开发来说?丝来说,确实是件很费时、费力,很艰难的一件事。


今晚是想实现把多张重叠在一起,或是标记一张图片中不同的位置然后赋以超链接。花了一晚上的时间,才算初步搞定,大致明白了以下几个css属性用法。


【1】将标签设置为float,和同事讨论:

html的标签有块级和行级(至于那些是块级,可百度之),每个块级会占用html文档的一行(之所以是一行,是因为块级后面会带有换行)。如果把块级标签设置为float时,则标签:(1)脱离原来父级标签。(2)可以在一行进行显示。


【2】position设置为fixed。

fixed是相对于整个浏览器。有兴趣的同学可以试验下,把一个有大小的标签设置为fixed,缩放浏览器,使浏览器产生滚动条(上下或左右),当拉动滚动条时,被设置成fixed的标签是不会改变其位置的。


【3】position设置为absolute。

absolute是相对于最近的父亲标签。依然是上面的那个试验,当拉动滚动条时,被设置成absolute的标签也会跟着html文档位置的改变而变动。


【4】position设置为relative。

relative是相对于原来该标签的位置。


下面结合今晚我做是试验图,来看下效果:


(1)a线是absolute

(2)b线是fixed。

上面图我主要的目的是,把圆盘中make1~8的位置给标记出来,然后给以超链接,具体的代码为:

mydw		makeR1	makeR2	makeR3	makeR4	makeR5	makeR6	makeR7	makeR8		


另外

【1】关于roundMakeBox居中的问题:

left:50%; margin-left:-250px; 
left:50%是标签的左边缘移动到父标签的50%处(一半),那为什么又要margin-left -250px呢?

因为当我left50%时,标签的左边缘虽然到了50%处,但整个的标签确实向右偏移了。我们所谓的标签居中,是想标签中心位置在父标签的中心位置处,left50%显然是多移动了标签一般的位置,原来标签是500px,因此就margin-left-250px了。


【2】关于makeR中每个a的像素位置,是怎么得到的?

弄清楚position的absolute后,剩下的就是测量位置了(用什么测?我是用尺,不知道是否还有其他更好的方式)。


好了,以上是我的理解,不知是否有表达清楚,或是我理解的有偏差,看官需要自己去实验测试。

下载本文
显示全文
专题