web前段

1、怪异盒模型

设置内间距会使盒子宽高变大 
设置边框会使盒子宽高变大 

解决方法1：把宽高度进行内减（减内间距和边框值）
解决方法2：设置怪异盒模型 会把内间距和边框进行内减
box-sizing: border-box;

这两种方法不会使盒子的宽高进行增大，个人建议用第二种方法，因为不用计算，简单

如果设置1或者2px的内间距或者边框，可以不用解决

.box1 {
/* width: 200px; */
/* height: 200px; */
background-color: tomato;

/* 设置内间距会使盒子宽高变大  */
/* 此时盒子的宽高度为300px  */
/*
此时盒子的宽高度为300px
宽：200px + 左内间距宽度50px  + 右内间距宽度50px = 300px
高：200px + 上内间距宽度50px  + 下内间距宽度50px = 300px
*/
padding: 50px;

/*     解决方法1：把宽高度进行内减（减内间距和边框值） */

/* width:200px   200px - 50px - 50px = 100px */
/* height:200px   200px - 50px - 50px = 100px */
/* 此时宽高为： */
width: 100px;
height: 100px;

}

.box2 {
width: 200px;
height: 200px;
background-color: purple;

/* 设置边框会使盒子宽高变大  */
/*
此时盒子的宽高度为300px
宽：200px + 左边框宽度50px  + 右边框宽度50px = 300px
高：200px + 上边框宽度50px  + 下边框宽度50px = 300px
*/
border: 50px solid blue;

/*   解决方法2：设置怪异盒模型 会把内间距和边框进行内减 */
box-sizing: border-box;

}

.box3 {
width: 200px;
height: 200px;
background-color: purple;

/* 设置了内填充和边框，会使盒子变大。宽高为480px */
padding: 20px;
border: 20px solid brown;

/* 解决方法2 */
box-sizing: border-box;

}

如果大家在写作业的时候，用到了内间距要设置box-sizing: border-box;

2、父子外间距塌陷

1.当子元素设置margin-top的时候，此时上外间距会叠加给父元素，子元素不会与父元素之间产生上外间距

2.当子元素和父元素都设置margin-top的时候，子元素与父元素之间还是不会产生上外间距，子元素的margin-top值和父元素的margin-top值做比较，父元素的margin-top值取其中最大,如果margin-top值一样大，取其父元素的

解决方法：
    1.给父元素设置overflow:hidden属性
    2.给父元素设置1px的上内间距或是1px的上边框
    3.规避margin，巧用padding