css中盒子宽高的auto

Posted 2020-06-29 hawthorn

　　　CSS盒模型中，auto属性只适用于外margin和width，border和padding不适用。下面就来说说它的情况。这里所说的都是标准流盒子。

　　1.横向来说

　　　　（1）若设置width,magrin-left,margin-right中某个值为auto,剩下两个为指定值，则设为auto的属性会确定所需的长度，从而使元素的宽度等于父元素的width。例如，盒的横向长度必须等于400px,没有设置padding和border，margin-right和width设置为100px,左外边距设置为auto，那么左外边距的宽度将是200像素。

　　　　（2）若没有设置为auto的，以上例来说，左右外边距和width都设置为某个像素（格式化属性过分受限），此时总会把margin-right强制为auto;

　　　　（3）不止一个auto时。若这三个属性左右外边距和width，中有两个设置为auto；

　　　　　　若margin-right和margin-left设置为auto，则二者设置为相等的长度，因此元素在父元素中居中（这是将元素居中的一个方法，而text-align只应用于块级元素的内联内容，将它设置为center并不能将这个元素居中）

　　　　　　若将某个外边距和width设置为auto，另一个外边距设置为指定像素，则设置为auto的外边距会减为0，width会设置为所需值；

　　　　　　若三个都设置为auto，这种结果与默认结果相同，即外边距为0，宽度默认为auto；

　　2. auto高度

　　　　若块级正常流元素设置为height:auto;

　　　　（1）对于内联内容（包括文本），显示时其高度将恰好足以包含内联内容的行高。会在元素段落上设置一个边框，并认为没有padding，这样下边框刚好在文本最后一行的下面，上边框搞好在文本第一行上面；

　　　　（2）若只有块级子元素，则其默认高度将从最高块级子元素的外边框边界到最低子元素的外边框边界之间距离。因此子元素的margin会“超出”包含子元素的元素；不过，若块级该元素（即父元素）有内边距或者边框，则其auto高度是从最高子元素的上外边界到最低子元素的下外边距边界之间距离；