从0到0.1学习实践盒子模型

盒子模型概念

预备知识

1. margin：外边距
2. border：边框
3. padding：内边距
4. height：文本高度
5. width：文本宽度

content-box

.father{
    box-sizing: content-box;
}

content-box --- >只计算内容区域的宽度和高度

*{
    margin: 0;
    padding: 0;
    box-sizing: content-box;
}
.father{

    height: 500px;
    width: 500px;
    background-color: plum;
    border: 5px solid;
    margin: 20px auto;
    padding: 20px;
}

• 盒子总宽度 = content-width（500px） + padding-left（20px） + padding-right（20px） + border-left（5px①） + border-right（5px①）

• 总高度 = content-height（500px） + padding-top（20px） + padding-bottom（20px） + border-top（5px①） + border-bottom（5px①） = 130px
  ①：这里只有border不准确，border越小，误差越大
  
  这里的4.984涉及到卷积，机器学习了，反正是浏览器的锅

总结：在 content-box 模型下,考虑四部分

border-box

border-box 包括内容,内边距和边框
这意味着在 border-box 模式下，元素的总宽度和高度更易于控制。

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.father{
    height: 500px;
    width: 500px;
    background-color: plum;
    border: 5px solid;
    margin: 20px auto;
    padding: 20px;
}

总宽度 = 520px
总高度 = 520px

总结：在 border-box 模型下,考虑两部分

盒子模型实践--制作一个九宫格