盒模型在开发过程中遇到的问题

转自https://www.cnblogs.com/clearsky/p/5696286.html

1 margin越界（第一个子元素的margin-top和最后一个子元素的margin-bottom的越界问题）

以第一个子元素的margin-top 为例：

当父元素没有边框border时，设置第一个子元素的margin-top值的时候，会出现margin-top值加在父元素上的现象，解决方法有四个：

1)给父元素加border——有副作用: 一般父元素Div用来做布局使用，添加border会使用内容的height和width变大

(2)给父元素加padding-top:1px——有副作用

(3)给父元素加overflow:hidden——有副作用：一旦子元素内容溢出，将会无法显示溢出的内容

(4)为父元素添加内容生成：该方法无任何副作用

.parent:before {

content:  ‘  ’；

display: table;

}

.parent {
     width : 500px;
     height : 500px;
     background-color : red;       
}
.parent : before {
     content : " ";
     display : table;
}

.child {
     width : 200px;
     height : 200px;
     background-color : green;
     margin-top : 50px;
}

<div class="parent">
    <div class="child"></div> 
</div>

2.浏览器间的盒子模型

（1）ul标签在Mozilla中默认是有padding值的，而在IE中只有margin有值。

（2）标准盒子模型与IE模型之间的差异：

　　标准的盒子模型就是上述介绍的那种，而IE模型更像是 box-sizing : border-box; 其内容宽度还包含了border和padding。解决办法就是：在html模板中加doctype声明。

3.