CSS核心概念之盒子模型

2020-03-17 16:00:48来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

CSS核心概念之盒子模型

当对一个文档进行布局的时候,浏览器的渲染引擎会根据标准之一的 **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核心概念


原文链接:https://www.cnblogs.com/jofun/p/12509185.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:前端命名规范

下一篇:移动端性能优化(CSS性能优化)