CSS盒模型

2021年09月15日 阅读数:3
这篇文章主要向大家介绍CSS盒模型,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

前言

在了解 CSS盒模型以前先了解下浏览器的排版引擎。css

根据 MDN 的解释,目前浏览器的排版引擎有三种模式:怪异模式(Quirks mode)、接近标准模式(Almost standards mode)、以及标准模式(Standards mode)。
1. 怪异模式下,排版会模拟 Navigator 4 与 Internet Explorer 5 的非标准行为;
2. 标准模式下,行为即(希望如此)由 HTML 与 CSS 的规范描述的行为;
3. 接近标准模式下,只有少数的怪异行为被实现。
在 HTML5 中,DOCTYPE 惟一的做用是启用标准模式。

什么是盒模型

盒模型”一词并无明确的文档定义,它是开发人员描述 CSS 中块级元素的一种约定俗称。
具体而言,针对一个块级元素,如<p>、<div>、<span>等,CSS 的规范定义了一个宽度和高度,以及 3 个级别的环绕它的框 padding、border 和 margin 。
这些属性咱们能够把它转移到咱们平常生活中的盒子上来理解,因此将这种模型称为盒模式。对于盒模型,针对高度和宽度的定义,不一样浏览器的解释不一样。

标准盒模型(标准模式体现)

盒子的大小就是 content 的大小,这一模型被称为 标准盒模型

标准盒模型的计算方式

box width = content width,
box height = content height,

IE 盒模型(怪异模式体现)

将盒子的 padding 和 border 算到了盒子的尺寸中,这一模型被称为 IE 盒模型

IE 盒模型的计算方式

box width = content width + padding left + padding right + border left + border right,
box height = content height + padding top + padding bottom + border top + border bottom,

总结

IE 盒模型和标准盒模型最大的区别在于盒子的宽高是否须要加上 padding 和 border 两边的距离,加上则为 IE 盒模型,不加则为标准盒模型。
在 HTML5 中,在页面最前方加上 DOCTYPE 声明的即为标准盒模型,若是须要将一个盒子由标准盒模型转为 IE 盒模型可以使用:box-sizing: border-box;属性

CSS盒模型_css

栗子

CSS盒模型_css_02
标准模式下,设置盒子的宽为 200,则内容区域的宽也是 200。

CSS盒模型_css_03
怪异模式下,盒子的宽为 200,但内容区域明显小于 200,多了两边的 border,致使内容区域只有 198。

CSS盒模型_css_04