详解margin: auto

auto是margin的可选值之一。相信大家平时使用auto值时,最多的用法大概是 margin: 0 auto; 和 margin: auto;

不过你可能也发现了不论是 margin: auto; 还是 margin: 0 auto; 效果都是一样的,都是让 #demo 水平居中了,但纵向并没有任何变化。

大家都知道 margin 是复合属性,也就是说 margin: auto; 其实相当于 margin: auto auto auto auto;,margin: 0 auto;相当于 margin: 0 auto 0 auto;,四个值分别对应上右下左。

水平方向:

> 正常流中的块级元素框的水平总和就等于父元素的width

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

> 在水平格式化的“7大属性”中,只有3个可以设置为auto: width, margin-left, margin-right;

水平方向的 auto,其计算值取决于可用空间(剩余空间)。

竖直方向:

宽度计算默认涉及包含块(可粗略理解为父级元素),而高度计算默认涉及内部元素。

默认行为的高度计算则是一系列“撑高”规则,而非“适应于父级”规则。

对于绝对定位元素,有以下算式:

top + margin-top + border-top-width + padding-top + height + padding-bottom + border-bottom-width + margin-bottom + bottom = height of containing block

.father {
position: relative;
width: 100px;
height: 100px;
background-color: black;
} .son {
position: absolute;
top: ;
left: ;
bottom: ;
right: ;
width: %;
height: %;
margin: auto;
background-color: red;
}
上一篇:js文件夹上传下载组件


下一篇:音视频上下文配置及avcodec_send_packet和avcodec_receive_frame完成音视频解码