css元素溢出、padding和margin笔记

元素溢出:当元素内容超过元素大小的时候的显示方式
使用方法：属性名字overflow默认visible可视，选项:hidden（超出部分隐藏） scroll(显示滚动条) auto(内容超出的时候自动出现滚动条)

padding:元素的内容与边界的距离，实际设置的时候会影响div的大小
margin:子元素距离父元素的距离
(1)利用margin设置元素水平居中，margin:0px auto、
(2)margin允许设置负值，通过设置负值可以两个元素的边框重合
(3)消除浏览器自带的margin：*{margin:0}
(4)塌陷问题以及解决方案：
当子元素设置margin时。如果其父元素没有边界，margin将会作用到父元素上，此为塌陷
塌陷问题解决方案:
1.给元素设置边框:需要计算border的大小
2.overflow:hidden此方法不能设置body，因为body默认overflow属性为visible
3.使用伪元素:此方法通用
方法:
父元素选择:before{
content:"";
display:table;
}
盒子的模型：
实际高度=height+padding-top+padding-bottom+border-top+border-bottom
实际宽度=weight+padding-left+padding-right+border-left+border-right
重点：
让css自动计算盒子实际大小，利用box-sizing：border-box