完整的框模型(Box Model)
不同的宽度、高度、内边距和外边距相结合，就可以确定文档的布局。
大多数情况下，文档的高度和宽度由浏览器基于可用的显示区域和其他一些因素自动确定。
1、元素框的最内部分是实际的内容。
2、直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。
3、边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
水平格式化
1、width影响的是内容区的宽度，不是整个可见的元素框。
2、规则：正常流中块级元素框的水平部分总和 == 父元素的width。
水平属性
1、7大属性： margin-left、border-left、padding-left、width、padding-right、border-right和margin-right。
2、只有width、以及左、右外边距这3个属性可以设置为auto。
使用auto
0个auto(3个属性都设置为非auto的某个值)
会把margin-right强制为auto。
//假设7个属性的和必须等于400px，那么右外边距的宽度将是200。
p {
margin-left: 100px;
margin-right: 100px;
width: 100px;
}
如果width和外边距都是100px，用户代理将把右外边距重置为auto，右外边距的实际宽度则会根据auto值来设置。
一个auto(设置width，margin-left或margin-right中的某个值为auto，而余下两个属性指定为特定的值)
设置为auto的属性会确定所需要的长度，从而使元素框的宽度等于父元素的width。
//假设7个属性的和必须等于400px，那么左外边距的宽度将是200。
p {
margin-left: auto;
margin-right: 100px;
width: 100px;
}
两个auto
两个外边距设置为auto：两个外边距会设置为相等的长度，元素将在父元素中居中。
width和一个外边距为auto：设置为auto的外边距会减为0；width会设置为所需的值。
//假设7个属性的和必须等于400px，那么p元素在父元素中居中显示。
p {
margin-left: auto;
margin-right: auto;
width: 100px;
}
//假设7个属性的和必须等于400px，那么左外边距的宽度将是0，width的宽度为300px。
p {
margin-left: auto;
margin-right: 100px;
width: auto;
}
三个auto
如果都为auto，则外边距都为0，width会尽可能宽
注意：水平外边距不会合并，父元素的内边距、边距和外边距可能影响子元素。即一个元素的外边距(以及内边距、边距等等)可能会为子元素带来偏移。
div{ padding:30px; background:silver; }
p { margin:10px; padding:0; background:white; }
负外边距
div{ width:400px; border:3px solid black; }
p { margin:20px; padding:0; background:white; }
p.wide{ margin-left:20px; width:auto; margin-right:-50px; }
父元素400px，但子元素有430px！
数学计算并没有算错：20px + 0 + 0 + 430px + 0 + 0 – 50px = 400px
注意：内边距、边框和内容宽高绝对不能为负，只有外边距能小于0。
替换元素
非替换块元素的所有规则同样适用于替换元素，只有一个例外：如果width为auto，元素的宽度则是内容的固有宽度。
垂直格式化
一个元素的默认高度由其内容决定。
高度还会受到内容宽度的影响。
段落越窄，相应的就会越高，以便容纳其中所有的内联内容。
垂直属性
1、(对应于水平格式化)7大属性： margin-top,border-top,padding-top,height,padding-bottom,border-bottom,margin-bottom。
2、只有height、以及上、下外边距这3个属性可以设置为auto。
3、其他四个必须设为特定的值或默认为0。
4、如果设置了border-style，边框的宽度会设置为medium。
使用auto
如果正常流中一个块元素的margin-top或margin-bottom设置为auto，它会自动计算为0。
height必须设置为auto或者某种类型的非负值。
height为auto
①如果块级正常流元素设置为height：auto，显示时其高度恰好足以包含其内联内容(包括文本)的行盒。会在段落上设置一个边框，并认为没有内边距，这样下边框刚好在文本最后一行的下面，上边框刚好在文本第一行的上面。
②如果块级正常流元素的高度设置为auto，而且只有块级子元素，其默认高度将是从最高块级子元素的外边距边界到最低块级子元素外边框边界之间的距离。因此，子元素的外边距会“超出”包含这些子元素的元素。
③如果块级元素有上内边距或下内边距，或者有上边框或下边框，其高度则是从其最高子元素的上外边距边界到其最低子元素的下外边距边界之间的距离。
A paragraph.
Another paragraph.
合并垂直外边距
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
- 1
- 2
可以看到每个列表项有10像素的上外边距和20像素的下外边距。但是图片上显示的相邻列表项之间的距离是20像素，而不是30像素。即会发生相邻外边距沿着竖轴合并。
外边距甚至可以与自身发生合并。
假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：
如果这个外边距遇到另一个元素的外边距，它还会发生合并：
负外边距
如果垂直外边距都设置为负值，浏览器会取两个外边距绝对值的最大值。
- 1
- 2
可以看到，列表项覆盖超过一半，是取的-0.75em。
如果一个正外边距与一个负外边距合并，会从正外边距减去这个负外边距的绝对值。
- 1
- 2
可以看到，列表项合并后覆盖了1-0.75 = 0.25em。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/214755.html原文链接：https://javaforall.net
