CSS 盒子模型

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

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

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

盒模型图例

下面的图片描述了 CSS 中的 盒子模型( Box Model )

CSS box-model

不同部分的说明

  • Margin(外边距) - 清除边框外的区域,外边距是透明的
  • Border(边框) - 围绕在内边距和内容外的边框
  • Padding(内边距) - 清除内容周围的区域,内边距是透明的
  • Content(内容) - 盒子的内容,显示文本和图像

为了正确设置元素在所有浏览器中的宽度和高度,我们需要知道的盒模型是如何工作的

元素的宽度和高度

当我们指定一个 CSS 元素的宽度和高度属性时,其实只是只是设置内容区域的宽度和高度
想要要知道,完全大小的元素,我们还必须添加填充,边框和边距。

下面的范例中的元素的总宽度为 450px

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

运行范例 »

让我们自己算算:300px (宽)+ 50px (左 + 右填充)+ 50px (左 + 右边框)+ 50px (左 + 右边距)= 450px

假如,我们只有只有 250 像素的空间

让我们设置总宽度为 250 像素的元素

div {
    width: 220px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0; 
}

运行范例 »

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

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

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

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

浏览器的兼容性问题

其实现在使用 IE8 的已经很少了,所以我们这里不讲解如何兼容 IE8 以下浏览器

如果非要兼容,那么可以在 HTML 页面声明 <!DOCTYPE html> 即可

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.