第二天

margin的负值问题
margin-top，如果是负值，元素向上移动
margin-left,如果是负值，元素向左移动
margin-right,如果是负值，右侧元素左移，自身不受影响
margin-bottom,如果是负值，下侧元素上移，自身不受影响

line-height属性可以继承
line-height:30px;直接继承30px;
line-height:2;直接继承2,然后计算字体大小的2倍
line-height:200%;先计算行高，再继承(小坑)

有宽度的块级元素，水平居中
margin可以实现块级元素的水平居中
条件是必须要有宽度，左右margin设置成auto 此方法只能进行水平的居中，且对浮动元素或绝对定位元素无效

绝对定位的盒子居中方法一
不能通过margin:0 auto 水平居中
left:50%:让盒子的左侧移动到父级元素的水平中心位置。
margin-left:-100px;让盒子向左移动自身宽度的一半

方法二
absolute元素(知道宽高):top,left,bottom,right = 0 + margin:auto
不知道宽高，如何实现垂直居中
absolute元素(不知道宽高):left:50%+top:50%+transform:translate(-50%,-50%)
通过display:table-cell来把它模拟成一个表格单元格，这样就可以利用表格那很方便的居中属性了
通过flex属性，align-items:center;justify-content : center;

父级外边距塌陷解决方案
1.给父级边框
border:1px solid transparent;
2.不用margin-top,改用父级的内边距，删除儿子的margin-top,必要时需要配合box-sizing:border-box;
3.儿子的margin-top保留，给父级一个内边距，1px
4.给元素设置overflow:hidden(触发bfc)
5.子元素转换成行内块元素 有浮动，固定，绝对定位的盒子，不存在塌陷问题，所有也可以通过设置浮动，定位来解决（触发bfc）
为什么要清除浮动？
防止父元素塌陷
清除浮动
1.父元素固定宽高
优点:简单，代码量少，没有兼容问题
缺点：内部元素高度不确定的情况下无法使用
2.添加新元素
优点：简单，代码量少，没有兼容问题
缺点：需要添加无语义的html元素，代码不够优雅，不便于后期的维护
3.使用伪元素
优点：仅用css实现，不容易出现怪问题
缺点：仅支持IE8以上和非IE浏览器
4.触发父元素BFC
优点：仅用css实现，代码少，浏览器支持好
缺点：用overflow:hidden触发BFC的情况下，可能会使内部本应正常显示的元素被裁剪