流动性的深入学习

何为"流"

流=文档流;

当我们在一个容器中倒入足量的水时,水一定会均匀平铺整个容器

所以流动性也就是100%自适应,但width=100%!=流动性自适应100%;

原因 :width=100%在正常(box-sizing=content box)的时候100%是对应content的宽带100%;而流动性自适应100%是对于content+padding+border的宽度100%,

但文档流只有在水平方向具有文档流

那如何可以让垂直方向可以有文档流呢?

格式高度和格式宽度

格式高度和格式宽度,同样据有流体性,只会出现在绝对定位模型中positon:absolute,fixed的非替换元素中同时出现了left/right;top/bottom对立的属性值的时候,元素就会格式化宽度和高度据有流体性,那么他们计算宽度就和margin在的时候的时候计算一样

div{position:absolute left:20px ; right:20px},如果父元素宽度大小为1000px,那么这个div的宽度为960px,这个计算方式和margin唯一可以影响内部尺寸的情况十分相似是在 div据有流动性的情况下div{margin-left:20px margin-right:20px}这个div也为960px;

上面会有两个拓展 1.既然高度也可以格式化那么是不是高度也可以垂直居中?2.一般子元素只相对父元素top和left会有定位效果

也就是说在子元素不据有流动性(设置了宽度)的情况下margin-right会看上去没有效果(但其实对兄弟元素有效果),而这里margin-right:20px看上去却有实际的对父级的效果?下面我们一样解答

1.答案是可以当子元素的position:ausolute,fixed时同时设置top,right,bottom,left都为0这样不单单格式化了宽度,连高度都格式化了(据有流动性),也就是当设置margin:auto的时候不单单是水平可以居中垂直方向也可以居中了,这里简单说下margin:auto的作用:是填充空闲的距离,但一般情况垂直方向是不回有填充效果的,但,这里因为据有(水平方向同垂直方向一样格式化了)有流动性,所以两个方向都可以居中,

2.中说明了当子元素自适应的时候有除了bottom的父元素3个方向定位(有left,right同时存在刚好在一起所以格式化的作用是和自适应的相同的地方在里形成的),但当子元素不是自适应只有left,和top两个方向也就是说会在right,bottom的方向上出现margin视觉是没有效果的(但对兄弟元素有影响),但如果是自适应margin-right就可以可以有对父级的效果,这里还有就是为什么top,left的定位就多了一个right就是因为当流动性的时候fight就相当有absolute中的left,right都为0,所以left,right都有的定位,那么在子元素的position:ausolute,fixed时同时设置top,right,bottom,left都为0,4个方向都可以对父级用了margin会有效果,同时证明了格式化 = 自适应的流动性

.

猜你喜欢

转载自blog.csdn.net/qq_39148344/article/details/83021064