盒模型中的内容讨论

margin 非 table 类型的元素,以及 table 类型中 table-caption, table 和 inline-table 这3类。例如 TD TR TH 等,margin 是不适用的。 并且,对于行内非替换元素(例如 SPAN),垂直方向的 margin 不起作用。
 
可以应用到的元素:除 display 值是 ‘table-row-group’,‘table-header-group’, ‘table-footer-group’, ‘table-row’, ‘table-column-group’ 和 ’table-column’ 的所有元素。
 
box-sizing:content-box或者border-box
 
水平格式化七大属性:margin-left(0),border-left(medium),padding-left(0),width(auto),padding-right(0),border-right(medium),margin-right(0)。
七个属性加在一起就是元素包含块的宽度,注意非元素的宽度。
 
七个属性中。width(auto),margin-left(0),margin-right(0)可以设置为auto。其余属性都是特定值或者0.
width应该设置为auto或者某种非负值。
 
auto的使用:
 
3个属性中某个值设置为auto:
其余两个特定,那么auto的属性会确定所需长度。从而填满整个父元素。
width为auto,margin-left和margin-right为特定值,那么width会根据内容来填充。
 
3个值都设置为auto:
跟默认的情况一样,(margin变为auto后取值为0)。(默认是width是auto,margin是0),width为尽量宽。
 
两个值设置为auto:
1.width为固定值,margin为auto,那么左右margin会取相同的值,将元素居中。
 
2.个外边距和width设置为auto,,另外的边设置固定外边距。那么设置为auto的外边距会变为0。宽度会设置为所需的值,使元素完全填充包含块。
 
三个都不是auto:
如果3个属性都设置了值,(格式化属性过分受限)此时会把margin-right强制为auto。
七个属性之和要等于父元素(包含块)的width。如果过于严格设置了所有值,而总宽度超过了父元素的宽度,那么会将margin-rght设置为auto,同时取负值。
原文地址:https://www.cnblogs.com/snowinmay/p/3062395.html