CSS盒子模型

紫玫瑰ABU

已于 2023-10-31 16:12:18 修改

阅读量29

点赞数

文章标签： css 前端

于 2023-10-31 14:38:13 首次发布

本文链接：https://blog.csdn.net/weixin_52540797/article/details/134139720

版权

1、内容盒子（W3C盒子、标准盒子）

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .contentDiv{
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 10px 20px 30px;
            padding: 13px 27px 32px;
            border: 5px solid red;
        }
    </style>
</head>
<body>
    <div class="contentDiv">内容盒子</div>
</body>
</html>

内容盒子计算公式

盒子宽内容区宽+左右内边距+左右边框 100px+27px+27px+5px+5px=164px

盒子高内容区高+上下内边距+上下边框 100px+13px+32px+5px+5px=155px

盒子所占页面空间宽盒子宽+左右外边距 164px+20px+20px=204px

盒子所占页面空间高盒子高+上下外边距 155px+10px+30px=195px

2、边框盒子（怪异盒子、IE盒子）

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .borderDiv{
            /* 设置盒模型 box-sizing content-box（默认值）borer-box（边框盒子） */
            box-sizing: border-box;
            width: 100px;
            height: 100px;
            border: 3px solid blue;
            margin: 10px 28px 29px;
            padding: 12px 19px 27px;
        }
    </style>
</head>
<body>
    <div class="borderDiv">边框盒子</div>
</body>
</html>

边框盒子计算公式

盒子宽 width 100px = 内容区宽+左右内边距+左右边框

盒子高 height 100px= 内容区高+上下内边距+上下边框

盒子所占页面空间宽盒子宽+左右外边距 100px+28px+28px=156px

盒子所占页面空间高盒子高+上下外边距 100px+17px+39px=156px

紫玫瑰ABU

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
CSS盒子模型

盒子宽内容区宽+左右内边距+左右边框 100px+27px+27px+5px+5px=164px。盒子高内容区高+上下内边距+上下边框 100px+13px+32px+5px+5px=155px。盒子所占页面空间宽盒子宽+左右外边距 164px+20px+20px=204px。盒子所占页面空间宽盒子宽+左右外边距 100px+28px+28px=156px。盒子所占页面空间高盒子高+上下外边距 100px+17px+39px=156px。
复制链接

扫一扫