随笔(HTML中水平垂直居中与脱离文档流的理解)

575 阅读2分钟

垂直水平居中方法其一:

position:fixed(absolute);

top:50%;

left:50%; 

margin-top:负的当前元素本身的一半;

margin-left:负的当前元素本身的一半;

其中对于fixed 和 absolutue的区别:

fixed是指相对于整个窗口或者整个视口的固定定位,而absolute是相对于最近的已经定位的祖先元素,因此要在页面中使用这种水平垂直居中时,一定要注意自己想要设计的垂直水平居中是相对于哪个位置所定位的。

文档流是将窗体自上而下分成一行一行,并在每行中从左到右依次排放元素,所谓脱离文档流的意思是元素脱离文档流之后,将不再在文档流中占据空间,而是处于浮动状态,所在的位置空间被释放;当一个元素脱离文档流后,依然在文档流中的其他元素将忽略该元素并填补其原先的空间。

常见的脱离文档流的情况是在使用浮动(float)和定位(position)的时候,但在使用定位(position)的时候,只有absolute和fixed能够造成脱离文档流,relative不会造成脱离文档流。

解决浮动脱离文档流的方法:

.clearfix::after{ 

        content:"";

        display:block; 

        clear:both;}

同时解决脱离文档流的方法在我目前所知还可以有的是

(1)当脱离文档流的时候,元素高度为零,所以我们可以手动加上高度。

(2)可以通过BFC(块级格式化上下文)开拓出一个区域,在BFC开拓的区域里与外界毫无关系,所以在这个区域里使用浮动(float)或定位(position)时不会发生脱离文档流的事件。