css_水平格式化,margin设置为auto

水平格式化有七个属性,分别是:margin-left,border-left,padding-left,width,padding-right,border-right,margin-right七个。其中只有margin-left,width,margin-right三个属性允许被设置为auto

水平格式化七个属性的值加在一起必须等于元素包含块的宽度,这也是允许其中三个属性设置为auto的前提。

当不设置auto值且七个属性值加在一起小于包含块宽度

这种时候用户代理会强制把margin-right设置为auto(仅限从左到右读的语言)。但是通过getComputedStyle()来获取margin-right依然得到的是开发者的设定值。

当只有一个值设置为auto时

当只有一个值设置为auto时,它可以是width,margin-left,margin-right三个中的任一个。只有这个一个未知数时,用户代理会计算得出auto的值以保证七个值相加等于元素包含块的宽度。

当有两个值设置为auto时

margin-leftwidth设置为auto时,用户代理是无法进行计算的,因为同时存在两个未知数。所以用户代理会把margin-left属性强制设置为0,从而计算得出width属性的值。(同理适用于margin-rightwidth属性设置为auto的情况)
margin-leftmargin-right值设置为auto时,用户代理会计算出两个值的和,再分别分配给两个值。渲染的结果就是内部元素相对于外部元素水平居中。

当有三个值设置为auto时

用户代理是通过计算而不是猜测得值。如果开发者要求用户代理去猜的话,用户代理则会很强硬地将magin-leftmargin-right强制设置为0,计算得出width的值。

posted @ 2021-06-08 09:42  Syinho  阅读(213)  评论(0编辑  收藏  举报