position-margin的一些研究测试
发布在css研究2015年2月2日view:4837
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

闲来又无聊

木有女票子的宅男周末总是这么蛋疼,何况现在临近春节了【2月份了】时间都是在不知不觉中溜走。也许,每个人现在都计划春节回家该喝几场酒席,该交多少的红包~~那么,假如你是也一个蛋疼的狗,在周末无聊不懂作甚,那么不妨看看这篇蛋疼的文章吧,反正也不懂做什么事,做点无聊的事情呗。

尽是无聊的小测试前戏

周五的时候写了一篇关于 垂直居中 table-cell ,其中的第三个方法里面提到了利用 position + margin 可以达到垂直居中的办法,但是前提是必须得知其显性高度值,否则无法得到垂直居中的效果。今天的主题就是来测试下两个属性。

margin

margin可以设置一个元素的外边距,有4个属性值,分别是长度length、百分比percentage、auto、inherit,其中它的默认值为0,长度和百分比都是指定一个长度值,这里不做讨论,inherit是从父元素继承其外边距,根据具体情况算出,下面来看看auto。

假设一个宽700px,高度200px的父容器包含一个宽度500px,高度72px的子元素,子元素设置 以下auto值:

1.margin-top:auto,此时auto等值0
margin-top

2.margin-right:auto,此时auto等值200px
margin-right

3.margin-bottom:auto,此时auto等值0
margin-bottom

4.margin-left:auto,此时auto等值200px
margin-left

假如上左下右边距都是设置为 auto 得到以下属性值
margin自动

此时,子元素水平居中在父元素,上下外边距的auto等于0,而左右外边距的auto等于100px,为什么上下边距的auto都是0,而左右的边距的auto都是100px,个人的见解是这样:在正常流布局中,文档的渲染都是从左上角到右下角,在没有破坏其正常流的情况下 margin-top:auto等值于 margin-top:0,这也是我们需要看见的。我们肯定不希望我们的文档一旦设置了margin-top:auto 就直接在上面元素上外边距增加一个数值并撑开页面的高度,同理 margin-bottom也是一样。但是对于 margin-right和margin-left 我们看下当右外边距设置为auto的时候,其实它的 他的值是200px,而子元素本身的宽度是500px,他们相加之和就是等于父容器的宽度值,宽度不会平白消失,它只是以另外一种形式转化,突然我怎么想到了能量守恒定律?!在正常流布局中,子容器左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距之和等于父容器宽度,假如左右外边距其中有一边为auto,另外一边不设置,那么此时auto的值就等于父容器宽度 - 子容器(width + border + margin-*)之和,不知这样是否可以解释各位对 margin 的迷惑?因此我=突然再想平常我们的 margin:0 auto 中的0在正常流布局来说是否是多余的?

或者你可以点击查看→demo margin-for-auto测试性代码,下面来说说定位属性 position

position属性

position总共有五个属性值,分别是默认值 staticrelative,absolute,fixed,inherit,对应的中文解释是静态定位,相对定位,绝对定位,固定定位,继承定位。给默认值static,赋值top,right,bottom,left都是不会被应用的,在这里不做过多研究,不信可以在本地写一个demo自己亲自测试一下~.~

2.relative相对定位,该属性会按照正常流布局,不会脱离文档,该属性可以达到垂直居中的效果,前提是知道容器的显性宽度和高度值和其包含块的宽高值,否则无法达到垂直居中的目的,并且一旦左侧有图片,那么要考虑的问题就会更加复杂,因此用此方法来达到垂直居中的目的显然是多此一举。

3.fixed固定定位,固定定位是相对视窗的固定定位,应用该属性的元素将会被钉在屏幕上,不管你的页面有多宽多高,永远钉在指定的位置,除非人为干涉,因此此属性很野蛮,目前用的最多的应该是导航的固定定位吧。

4.absolute绝对定位,应用该属性值的元素将会从正常的文档流删除,它的包含块是非 static 的祖先元素。单独设置上左右下偏移量为 auto 时,因为这是默认值,因此此时没有任何改变,其表现出还是像正常布局一样。

假设一个宽700px,高度200px的父容器包含一个宽度500px,高度72px的子元素
①.当上偏移量都为0时,此时子元素相对其包含块只是指定了 margin-right:200px;
②.当右偏移量都为0时,此时子元素相对其包含块只是指定了 margin-left:200px;
③.当下偏移量都为0时,此时子元素相对其包含块只是指定了 margin-right:200px;
④.当左偏移量都为0时,此时子元素相对其包含块只是指定了 margin-right:200px;
当然,这只是它表现出来的相似性,本质不是,就算是增加了 margin:auto,auto的值也都是变成了默认值0,你可以点击查看→demo position-单边测试性代码

所有的子元素都加上margin:auto并且设置两个外边距值为0;
①.当top:0;right:0时,子元素相对包含块等值 margin-left:200px,
②.当top:0;bottom:0时,子元素相对包含块等值 margin-top:64px;margin-bottom:64px;
③.当top:0;left:0时,子元素相对包含块等值 margin-right:200px
④.当right:0;bottom:0时,子元素相对包含块等值 margin-left:200px,marin-top:128px;
⑤.当right:0;left:0时,子元素相对包含块等值 margin-left:100px,marin-right:100px;
⑥.当bottom:0;left:0时,子元素相对包含块等值 margin-right:200px,marin-top:128px;
你可以点击查看→demo position+margin测试性代码

所以,当我们把这四个偏移量都设置为0之后,并且把外边距设置为auto时,他就呈现出来垂直居中显示,如下代码

.test{
    width: 500px;
    height: 72px;
    position: absolute;;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

上面这些值都缺一不可,都是必需的!margin + top + bottom 是让子元素脱离正常流布局,但是又拥有在正常流上下外边距 margin-top:auto;margin-bottom:auto 原本的值【类似margin-right:auto会自动变成200px】,而margin + left + right 则是还原本来 margin:auto 居中的特性,从而达到了盒子的平衡:
子容器左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距之和等于父容器宽度
子容器上外边距 + 上边框 + 上内边距 + height + 下内边距 + 下边框 + 下外边距之和等于父容器高度

一切又回到了盒子,css中都是盒子模型,一切都是盒子,不管页面多么花哨,多么复杂,所有的一切都是回归其本质来讲,那就是盒子模型!

晚安

还没有检查错别字,明天再检查,先睡觉了~~假如你觉得不是这么理解,不妨也说说你对此的见解?

参考资料:
position<br

本文地址:http://xiaoho.com/?p=922

评论
发表评论
3年前

看看css权威指南吧,技术还不够

3年前

赞了此文章!

4年前

position 还少一个 sticky

4年前

@蝃蝀闻岚 嗯呐,设置inline-block的元素本身显示img所具备的属性,也可以了解为该子元素就是一替换元素,假如没有指定 margin 的值,那么它的值本身就是0。不过,好像我们没有确实统计过哪些值会影响到margin,这个是好想法。

4年前

怎么说呢,无法否定你的说法,因为它在一些情况下确实是work的,但是如果子元素设置inline-block呢,margin-auto就从200px变成了0px,那么前提就要更改,或者就是说inline-block影响了margin-auto的值。。。 最起码你说的平时的margin: 0 auto 我感觉还是有意义的,因为我们没有很好的统计过哪些值会影响margin-auto

4年前
赞了此文章!
4年前

margin:auto 文中解释不通左右边距和上下边距的区别。。。

4年前
赞了此文章!
WRITTEN BY
DO1路人乙
个人博客:xiaoho.com
TA的新浪微博
PUBLISHED IN
css研究

很喜欢这个前端论坛~所以在自己博客的每一篇原创文章都会在这边跟大家分享一下,暂定就这么多,纯粹的爱好者。

我的收藏