文章: 阅读:

CSS Box Model 盒子模型

CSSCSS

前言

  • 所有 HTML 元素可以看作盒子，在 CSS 中，”box model” 这一术语是用来设计和布局时使用。

1、盒子模型

  • CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距，边框，填充，和实际内容。

  • 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

  • 下面的图片说明了盒子模型（Box Model）：

  • 不同部分的说明：

模型 描述
Margin（外边距） 清除边框外的区域，外边距是透明的
Border（边框） 围绕在内边距和内容外的边框
Padding（内边距） 清除内容周围的区域，内边距是透明的
Content（内容） 盒子的内容，显示文本和图像

2、元素的宽度和高度

  • 当指定一个 CSS 元素的宽度和高度属性时，只是设置内容区域的宽度和高度。要知道，完整大小的元素，还必须添加内边距，边框和外边距。

  • 下面的例子中的元素的总宽度为 300px：

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <style>
        div {
            background-color: lightgrey;
            width: 300px;
            border: 25px solid green;
            padding: 25px;
            margin: 25px;
        }
    </style>
    1
    <div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 绿色边框。</div>

  • 效果

  • 让我们自己算算：

    • 300px (宽) + 50px (左 + 右填充) + 50px (左 + 右边框) + 50px (左 + 右边距) = 450px

  • 最终元素的总宽度计算公式是这样的：

    • 总元素的宽度 = 宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距

  • 元素的总高度最终计算公式是这样的：

    • 总元素的高度 = 高度 + 顶部填充 + 底部填充 + 上边框 + 下边框 + 上边距 + 下边距

3、浏览器的兼容性问题

  • 一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。

  • 虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。

  • IE8 及更早 IE 版本不支持设置填充的宽度和边框的宽度属性。

  • 解决 IE8 及更早版本不兼容问题可以在 HTML 页面声明 <!DOCTYPE html> 即可。

4、CSS 实例

如果您觉得阅读本文对您有帮助，请用微信、支付宝 or QQ 扫码赞助，您的支持是我写作最大的动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文链接，否则保留追究法律责任的权利。

Qian Chia

Posted @ 2019-11-05 20:19


评论


文章目录
  1. 1. 前言
  2. 2. 1、盒子模型
  3. 3. 2、元素的宽度和高度
  4. 4. 3、浏览器的兼容性问题
  5. 5. 4、CSS 实例
隐藏目录