提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Javascript

当前栏目

CSS 盒模型

CSS
2023-03-15 22:46:58 时间

1. 标准盒模型

在标准模型中，如果你给盒设置 width 和 height，实际设置的是 content， padding 和 border 再加上设置的宽高一起决定整个盒子的大小

<style>
    .box {
        width: 350px;
        height: 150px;
        margin: 25px;
        padding: 25px;
        border: 5px solid black;
    }
</style>
<body>
    <div class="box"></div>
</body>

image

image

  • 计算方式：
    • 宽度 = 410px (350 + 25 + 25 + 5 + 5)
      • width + paddingLeft + paddingRight + borderLeft + borderRight
    • 高度 = 210px (150 + 25 + 25 + 5 + 5)
      • height + paddingTop + paddingBottom + borderTop + borderBottom

注: margin 不计入实际大小 —— 当然，它会影响盒子在页面所占空间，但是影响的是盒子外部空间。盒子的范围到边框为止 —— 不会延伸到margin。

2. IE盒模型 | 怪异盒模型

<style>
    .box {
        width: 350px;
        height: 150px;
        margin: 25px;
        padding: 25px;
        border: 5px solid black;
        box-sizing: border-box;
    }
</style>
<body>
    <div class="box"></div>
</body>

image

  • 计算方式：
    • 宽度 = 350px (290 + 25 + 25 + 5 + 5)
      • content + paddingLeft + paddingRight + borderLeft + borderRight
    • 高度 = 150px (90 + 25 + 25 + 5 + 5)
      • content + paddingTop + paddingBottom + borderTop + borderBottom

相关文章