前端学习过程中的一些小问题汇总

margin-top导致的顶部塌陷问题

这个问题时间已经过了很久了，具体情况忘记了，大概是下面这个样子

<div style="margin:0">
   
    <div stlyle="margin-top:50px"></div>
    <div stlyle="margin-top:50px"></div>
    <div stlyle="margin-top:50px"></div>

</div>

这样会导致父容器的margin值变化，后面发现通过清除浮动的方式就可以解决了

清除浮动方式

• 额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）
• 父级添加overflow属性（父元素添加overflow:hidden）
• 使用after伪元素清除浮动
• 使用before和after双伪元素清除浮动

content-box和border-box

老是记混这里两个盒子模型，在这里记录一下，加深下记忆，希望下次不要再记混了

• content-box：标准盒模型，又叫做 W3C盒模型，一般在现代浏览器中使用的都是这个盒模型
• border-box：怪异盒模型，低版本IE浏览器中的盒模型

二者区别

• content-box：padding和border不被包含在定义的width和height之内。
  盒子的实际宽度=设置的width+padding+border
• border-box：padding和border被包含在定义的width和height之内。
  盒子的实际宽度=设置的width（padding和border不会影响实际宽度）