今天这篇文章写一下自己关于前端中基础的CSS盒子模型中的一些注意事项。之前写页面时。HTML的结构完全没有问题。可是到了后面加CSS样式时，关于marging，padding中就总有问题解决不了。每次好不容易写完这块，写到下面的时候，又会开始出错，会因为设置了padding，需要去重新改变之前设置的width等属性。后来发现了关于margin和padding的几种特殊现象。
首先，关于padding，相信大家都知道padding是设置内边距，一般它会影响到盒子的大小。所以每次给一个标签设置了padding，就需要去改变之前设置该标签的width和height属性，否则该盒子会变大。但目前有种情况是设置padding，并不会影响盒子大小。如果在父元素中有一个子元素，如果该子元素没有设置宽度，那么这时候，给子元素设置padding-left或padding-right也并不会影响到盒子的大小。
其次，关于margin是设置盒子的外边距，但是它也是有自己独特的合并现象。第一种是块级元素的上下间距会取较大值进行合并。行内块级元素左右间距是不会合并的。第二种是父子元素的margin合并问题。如果父元素中有一个子元素，给子元素设置外间距margin-top，子元素并不会直接距离父元素有一个上面外间距的一个距离，而是父元素会和子元素一起距离body有个margin-top的距离。解决这个问题一般有三种方法。第一种是给父元素设置一个透明的上边框。第二种是给父元素添加一个padding-top:1px;的属性。第三种方法是给父元素设置一个overflow:hidden 的属性。前两种方法有一点不好之处，就是都会让盒子增加一个像素，所以并不推荐使用。第三种方法是关于overflow属性的一个特性。一个元素如果给它设置了overflow属性，那么这个元素就会成为一个独立渲染区。在这个区域内，它的显示内容的方式并不受外界影响。
接下来，顺带说下margin: 0 auto 和text-align: center是内容居中的属性。margin: 0 auto 是设置容器在水平方向上的位置。而text-align:center是设置容器中的文本在容器水平方向的对齐方式。
