2024-12-11 23:31阅读: 37评论: 0推荐: 0

标准盒子与怪异盒子

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

本文作者:GJ504b

本文链接:https://www.cnblogs.com/GJ504b/p/18601209

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   GJ504b  阅读(37)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
收起