标准盒子与怪异盒子

从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;
}

alt text
alt text

  • 盒子总宽度 = 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越小，误差越大
    alt text
    这里的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;
}

alt text

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

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

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

alt text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.father{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    height: 500px;
    width: 500px;
    background-color: plum;
    border: 1px solid;
}
.father div{
    border: 1px solid;
    height: 33.3333333%;
    width: 33.3333333%;
}
    </style>
</head>
<body>
    <div class="father">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>
posted @ 2024-12-11 23:31  GJ504b  阅读(84)  评论(0)    收藏  举报