margin与元素尺寸以及相关布局
-
元素尺寸的相关概念:
元素尺寸:指元素的border-box。
元素内部尺寸:元素的padding-box。
元素外部尺寸:元素的margin-box。
元素尺寸和元素内部尺寸决定元素自身的尺寸大小,元素外部尺寸决定了元素与其他元素的位置关系,不影响自身尺寸。 -
margin与元素的内部尺寸
在默认水平流方向下,margin只能改变左右方向的内部尺寸,并且只有元素是充分利用可用空间的时候margin可以改变元素的可视尺寸,例如width为auto的块级元素,当元素设定了width或呈包裹性时,margin对可视尺寸无效。
比如说如下CSS
.father{
width:200px;
margin:0 -20px;
}
此时元素还是200px,尺寸无变化,因为只要width设定了宽度,那么margin就不能改变元素的可视尺寸。但是如果是一下HTML和CSS
.father{
width:200px;
}
.son{
margin:0 -20px;
}
<div class="father">
<div class="son"></</