三种可视化格式模型:普通文档流、相对定位与绝对定位、浮动
第一次写博客,第一篇是对css的定位机制做个的总结。还望大家指点指正。
在CSS中是有三种定位机制的:普通文档流、浮动和绝对定位。在未指定其它两种定位机制的情况下,所有框都是在普通文档流中定位的。
普通文档流:
普通文档流,顾名思义,就是根据块级元素的标签在HTML里的顺序,像水流一样,从上至下。当然对于行内元素而言,还是在一行中水平排列的。
这里插入一个积累的小知识点。
行内元素可以在水平(内间距、边框。外边距)方向上修改它们水平尺寸,但是在垂直方向上对行内元素的高度是毫无影响的,还有就是直接定义行内元素的width/height也是毫无影响。对与行内元素来说,它的高度仅仅容纳下它所包含的内容即可。But,通过设置行内元素的行高line-height,就可以增加这个行内元素的高度。(当然还有就是,将行内元素的style属性里设置一个display:block,即可将其转化成块级元素。)
相对定位和绝对定位:
- 相对定位(relative): 是一种相对于起点的移动,根据top和left值做出改变。但是无论是否移动,元素仍然占据原来的空间,所以移动的元素会导致覆盖的情况。它仍然是被看 作普通文档流的一部分,这和接下来的绝对定位有着本质区别。(这里要着重强调!relative是属于标准文档流的一种,例外的是它还可以和float共用)
- 绝对定位(absolute): 这是一种非常有用,也经常被人滥用的css技术。绝对定位会使元素脱离普通文档流,不占据文档流的空间。其它元素的布局会忽视绝对定位。它是相对于 基于它的上一个已经定位的祖先元素进行偏移。若没有已经定位的祖先元素,通常情况下就会根据HTML元素进行偏移。进行绝对定位后,会有显示的层级z-index,数值越高,层级越高。
- 固定定位(fixed): 它也属于绝对定位,脱离文档流,会发生覆盖。但是它是基于视口的定位而且随着滚动条滚动,位置不会发生改变。(IE6并不支持)
下面说说它们的组合用法:
对于一个嵌套的元素,要让内层元素灵活定位在包含元素的附近。可以先让包含元素position:relative,再让内层元素position:absolute,这样内层元素就会相对于外层元素进行位移。
(很多所见即所得的software,就是将所有元素都进行绝对定位,通过精确的像素定位各个部分的元素。但是问题也十分明显,可维护性极其低下,一旦有一些例如字号修改等会改变元素尺寸的行为,会导致布局完全混乱,不得不为了这点小改变,进行页面重构。放弃所见即所得吧,它会让你变得懒惰自满。)
浮动:
重点说一下浮动.
浮动(float)是最有意思的一个可视化模型,会经常应用到我们实际的前端页面上。
进行浮动后的元素,会和绝对定位相似,脱离文档流,失去文档流的元素空间。若进行左浮动,脱离文档流的元素会向左移动,直到遇到包含元素的左边缘。若多个元素一起浮动,则除第一个元素之外,其它元素都会定位在前一个浮动元素之后(即它的右边)。
若包含元素不够宽,则无法水平排列的元素会向下移动,直到有足够的空间。若浮动元素的高度不一致,还会发生元素卡在较高的元素的现象。请看图片。
还有关于元素浮动造成包含元素高度塌陷。
因为浮动元素脱离了文档流,所以浮动元素并不会占据包含元素的空间,包含元素高度不会自动撑开,造成塌陷。我们需要做点清除浮动的处理。
- 我们可以在包含元素最后增添一个新的空元素,并在空元素style上应用clear:both。但缺点也明显,clear只对块级元素有用,这样会增添了一些无意义的块级标签。
- 对包含元素也应用浮动。这个方法万不可使用,如果全部都进行浮动,页面会极其复杂。
- 使用overflow的副作用。overflow本是用来对溢出内容进行样式声明,但它有一个“副作用”,就是会清除包含元素里的浮动元素。使用这个方法的缺点是,一旦有溢出内容,则会造成内容被切断,出现清楚浮动的副作用。
- 使用:after伪元素(伪类),动态生成元素,并做清除浮动,不会有无意义标签。缺点是不兼容老版IE浏览器。
一般来说,3、4比较常用,具体怎么用需要看实际情况定夺。
下面详细说一下方法4,一般来说方法4的CSS代码如下:
.clear:after { content : "."; height : 0; visibility : hidden; display : block; clear : both; }
"."是一个非常小不会被注意的字符。因为要让其不可见,所以要把它的height设置为0,且它的visibility设置为hidden。最后为了使其变成块级元素能够clear要用到display:block;这样就Done了。当然对于不兼容的老IE还要再加一个类:
.ieClear{zoom : 1;}
大致做了一个新手总结,希望可以帮到大家。
水平有限,欢迎指点。