css基础知识1、盒模型计算 offsetWidth = (内容宽度+内边距+边框) 无外边距添加 box-sizin

1、盒模型计算

offsetWidth = (内容宽度+内边距+边框) 无外边距

#div1{
  width: 100px;
  padding: 10px;
  border: 1px solid #ccc;
  margin: 10px;
}

div1的offsetWidth为 1+10+100+10+1=122px

添加 box-sizing：border-box 后width就是整个宽度

#div2{
  width: 100px;
  padding: 10px;
  border: 1px solid #ccc;
  margin: 10px;
  box-sizing:border-box;
}

div2的offsetWidth为 100px = 1+10+78+10+1

2、margin纵向重叠

相邻元素的margin-top和margin-bottom会发生重叠，空白标签也会重叠也会被忽略。

<body>
  <style>
    p{
      font-size: 16px;
      line-height: 1;
      margin-top: 10px;
      margin-bottom: 15px;
    }
  </style>
  <p>AAA</p>
  <p></p>
  <p></p>
  <p></p>
  <p>BBB</p>
</body>

重叠后取最大值所以为15px

3、margin负值问题

margin-top和marginleft 负值，元素向上、向左移动

margin-right负值，右侧元素左移，自身不受影响

margin-bottom负值，下方元素上移，自身不受影响

4、BFC理解与应用

什么是BFC？如何应用

block format context 块级格式化上下文
一块独立渲染区域，内部元素的渲染不会影响边界以外的元素

形成BFC的常见条件

float不是none时
position是absolute或fixed
overflow不是visible
display是flex、inline-block等

BFC的常见应用

清除浮动

1.添加新元素

clear{
    clear:both
}

2.对父元素添加伪元素

container::after{
    content:'',
    display:block,
    height:0,
    c;ear:both
}

3.对父元素添加overflow:hidden