CSS盒子模型（Box Model）

最新推荐文章于 2024-05-09 17:11:12 发布

骑鱼的少年

最新推荐文章于 2024-05-09 17:11:12 发布

阅读量501

点赞数 1

分类专栏： css 文章标签： css盒子模型

4 篇文章 0 订阅

订阅专栏

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin），边框（border），内边距（padding），和实际内容（content）。

在这里插入图片描述
width就是concent的宽度，不包括padding margin border的长度
height就是concent的高度，不包括padding margin border的高度

最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

在这里插入图片描述
width=concent+padding+border

注意：IE6/7/8比较怪异，在不写doctype的情况下使用ie盒模型。
如果在页面的头部使用了doctype声明，只要这行代码存在浏览器看到它后用W3C标准来标准盒模型渲染页面；如果没有这行代码，各个浏览器会按照自己的标准去使用不同的盒模型渲染。

><!--HTML5中的文档类型声明-->
<!DOCTYPE html >

值	描述
content-box	这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
border-box	为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

本质上，如下

box-sizing:content-box        //W3C盒模型
box-sizing:border-box         //IE盒模型

html {

  box-sizing: border-box;
}
*,

*::before,

*::after {

  box-sizing: inherit;

}

在这里插入图片描述

关注

专栏目录