发表于: 2016-04-29 09:42:10

1 1416


今天完成的事情:Task4收尾,Task5-1开了头。复习了html和css的知识。

明天计划的事情:把Task5做完

遇到的问题:

如果我设置成position:absolute,border-ridus的话,回存在和上图一样的白边。设置成float也一样。

收获:尽管已经做了几个Task了,但是我一直就觉得知识不够牢固,于是去回顾了一下。给大家总结几个很重要的基础概念。

文档流


什么叫做文档流? 将窗体自上而下分成一行行,并在每行中按从左至右的顺序排列元素,即为文档流。

有三种情况使得元素脱离文档流而存在,分别是浮动,绝对定位,固定定位。

没错,这就是文档流,就像写信一样,从左至右,自上而下,就这么简单,互联网一开始就是为了浏览这些文档。

但是,这样不利于排版,于是,早期的互联网专家们为了更方便的写出更直观的文档,他们制定了HTML并且规定

了一些基本原则,比如,所有的元素分为三类:块级元素(block),内联元素(inline)。


以上是我复制剪切过的。w3school中提到“一切皆框”,所以我们通用的设计模式是“div + css”而其中很重要

的两个定位方式:float和position。float就很好理解脱离文档流并且向右或向左移动,直到它的边缘碰到包含框

的边缘。脱离文档流的意思是他已经不再文档流中占有位子了,意思是他可以被覆盖。

而position有三种:

1.相对定位(relative),即相对于元素在文档中的位置进行偏移。但保留原占位符。

2.绝对定位(absolute),即完全脱离文档流,原占位不保留,相对于position属性非static值的最近父级元素  进行偏移。

3.固定定位(fixed),即完全脱离文档流,相对于浏览器的内容窗口进行偏移。

这三者的区别在于他们定位的标准不一样!

相对定位的标准是:元素原有的位子

绝对定位的标准是:最近父元素(所以我们一般子元素用absolute,父元素用relative),Task的header部分一般就是这么玩的。且它可以被覆盖

固定定位:则是相对于当前网页定位了。这个很好理解吧。

好吧,今天就是这样了。






返回列表 返回列表
评论

    分享到