欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

CSS核心概念之盒子模型

程序员文章站 2022-07-02 11:38:39
当对一个文档进行布局的时候,浏览器的渲染引擎会根据标准之一的 **CSS 基础框盒模型(CSS basic box model)**,将所有元素表示为一个个矩形的盒子。所有 HTML 元素可以看作盒子,在 CSS 中,**Box Model** 这一术语是用来设计和布局时使用。 ......

盒子模型(box model)

关于更多css核心概念的文章请关注github——css核心概念

当对一个文档进行布局的时候,浏览器的渲染引擎会根据标准之一的 css 基础框盒模型(css basic box model),将所有元素表示为一个个矩形的盒子。所有 html 元素可以看作盒子,在 css 中,box model 这一术语是用来设计和布局时使用。

css 盒模型本质上是一个盒子,封装周围的 html 元素,每个盒子由四个部分(或称区域)组成:内容(content)内边距(padding)边框(border)外边框(margin)盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(box model)

CSS核心概念之盒子模型

css 盒模型不同组成部分的说明:

  • content(内容) - 由内容边界限制,容纳着元素的“真实”内容,例如文本、图像,或是一个视频播放器。
  • padding(内边距) - 由内边距边界限制,扩展自内容区域,负责延伸内容区域的背景,填充元素中内容与边框的间距。当其取值为百分比时,该百分比都是相对于包含该元素的块的宽度(相对于该块的百分比)。
  • border(边框) - 由边框边界限制,扩展自内边距区域,是容纳边框的区域。即围绕在内边距和内容外的边框。
  • margin(外边距) - 由外边距边界限制,用空白区域扩展边框区域,以分开相邻的元素。当其取值为百分比时,该百分比都是相对于包含该元素的块的宽度(相对于该块的百分比)。

标准盒模型与怪异盒模型

盒子模型分为两种:第一种是 w3c 标准的盒子模型(标准盒模型) 、第二种 ie 标准的盒子模型(怪异盒模型)

当前大部分的浏览器支持的是 w3c 的标准盒模型,也保留了对怪异盒模型的支持,当然 ie 浏览器沿用的是怪异盒模型怪异模式是“部分浏览器在支持 w3c 标准的同时还保留了原来的解析模式”,怪异模式主要表现在 ie 内核的浏览器。

标准盒模型怪异盒模型的表现效果的区别:

  • 标准盒模型中 width 指的是内容(content)区域的宽度;height 指的是内容(content)区域的高度。标准盒模型下盒子的大小 = width + border + padding + margin。
  • 怪异盒模型中的 width 指的是内容(content)、边框(border)、内边距(padding)总和的宽度,即 width = content + border + padding;height 指的是内容(content)、边框(border)、内边距(padding)总和的高度。怪异盒模型下盒子的大小 =width + margin

注意w3c 的标准盒模型ie 怪异盒模型主要区别是:盒模型中的 width 是否包含 border 和 padding。w3c 的标准盒模型的 width 不包含 border 和 padding,而ie 怪异盒模型的 width 中包含 border 和 padding。

浏览器如何解析盒模型

如果是定义了完整的 doctype 的标准文档类型,无论是哪种模型情况,最终都会触发标准模式,如果 doctype 协议缺失,会由浏览器自己界定,在 ie 浏览器中 ie9 以下(ie6、ie7、ie8)的版本触发怪异模式,其他浏览器中会默认为 w3c标准模式

设置盒模型解析模式

我们还可以通过设置 html 元素的 box-sizing 来设置盒子模型的解析模式

box-sizing 的属性值:

  • content-box: 默认值,border 和padding 不算到 width 范围内,可以理解为是 w3c 的标准模型
  • border-box:border 和 padding 划归到 width 范围内,可以理解为是 ie 的怪异盒模型
  • padding-box:将 padding 算入 width 范围

当设置为 box-sizing: content-box 时,将采用标准模式解析计算(默认模式),当设置为 box-sizing: border-box 时,将采用怪异模式解析计算。如:

<!-- 将 div 设置为怪异盒模型解析模式 -->
<div style="box-sizing: border-box;"></div>

关于更多css核心概念的文章请关注github——css核心概念