2.16学习总结

margin相关问题及解决方案

兄弟元素

左右margin相加，上下margin取大值

父子元素

左右margin设置离父元素左右的距离，上下margin可能会传递给父元素

内联元素

上下的padding和margin都有效，但是不影响上下元素的布局，左右与块元素相同

外边距重叠问题

给与父元素相邻子元素一个上/下的外边距，会传递到父元素

设置父元素：

解决方案1：给父元素设置display：flex

解决方案2：给父元素添加一个边框，此时要注意边框会撑大元素本身，所以此时需要添加box-sizing：border-box

解决方案3：通过设置父元素的padding来实现，此时会发生与添加边框一样的问题

解决方案4：设置父元素浮动，但父元素会脱离文档流

解决方案5：设置父元素绝对定位或固定定位，使父元素脱离文档流

解决方案6：设置父元素overflow值不为默认值（visible）

方案4、5、6是开启父元素的BFC

解决方案7：设置父元素一个伪元素选择器设置

.fa::before {

content：“”；

display：table；

}

与解决高度塌陷一起设置

.fa::before,

.fa::after{

content: "";

display: table;

clear: both;

}

设置子元素

解决方案1：给子元素设置浮动，此时margin：50px auto；auto失效

设置html页面：

解决方案1：在父与子元素之间添加一个table标签

水平布局：

               width+padding+border+margin<父元素的width

               1. width+padding+border+margin都设置了确定值

                  当小于父元素的width时，多余的部分给margin-right吸收

               2.当width不设置或者设置为auto值时，多余的部分有宽度吸收

                 当margin-left=auto,多余的部分由margin-left吸收

                 当margin-right=auto,多余的部分由margin-right吸收

               总结：当设置了auto就将多余的部分给它，注意能设置auto值的属性：width，margin-left，margin-right

               3.有二个属性设置auto时

                 width与margin-left/width和margin-right同时设置auto值时，对于部分有width吸收，margin-left/margin-right没有值

                 margin-left和margin-right同时设置为auto时，多余部分平分给左右外边距=》块元素的水平居中

               4.设置三个auto

                width与margin同时设置auto时，多余部分由宽度吸收