知识前要:
1文档流,是盒模型中的概念。
文档流就是在浏览器中的规则,块状元素的规则是从上到下排序的,行内元素是从左到右排序的
文档流我个人觉得就是盒模型之间的空间或者说是空气
2文本流,是文本中的概念,只适用于文本
这两个不会互相影响
3脱离文档流,有float,absolute和fixed(relative并不会脱离文档流)
其中float和position(absolute和fixed)是有区别的
float是脱离文档流,但是没有脱离文本流。???这句话是啥意思?
也就是说,box会对你视而不见,会占据你所在的空间,放在你的下方(z轴)。那文字是可以看到你的。
给demo1设置了浮动float之后
可以看到demo2的box和demo1的box重叠了,并且放在demo1的下面。这就是脱离了文档流。但是文字可以看见已经浮动的demo1的。所以,float是脱离了文档流但是没有脱离文本流的。我们的float是可以通过浮动来清楚浮动属性的。但是只能影响到自己。float可以做到文字围绕的效果
我们的position中的属性,absolute和fixed是会都脱离的。
所以,我们在水平居中对齐的时候,可以先使用absolute让box脱离文档流(相对于第一个不为static的元素)。然后再使用left,top,bottom,right都为0和margin:auto。这样就可以实现水平居中对齐
咱们对margin再进行一些拓展
margin向间隔的是box,对于两个box之间设置距离,但是他没办法对于文档流(或者说空间来设置间隔距离)
1margin合并
例如:
会取其中最大的值
**
2子元素设置margin-top,出现塌陷现象
**
效果并不是我们想要的,margin于父的box,从而达到居中的效果。这就是margin中的塌陷现象
解决方法就是,在父div上设置一个border.因为子元素box属性margin只能相对于box(但是他现在踹的是流,空气),现在使用borber对父元素进行封口。就可以达到我们想要的效果了。所以我们水平垂直居中必须要先进行position脱离文档流