Loading...
墨滴

pmcee

2021/06/06  阅读:37  主题:橙心

CSS基础:盒子模型

CSS 盒子模型

CSS 盒子模型
CSS 盒子模型

一、什么是盒模型

当对一个文档进行布局(layout)的时候,浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型(CSS basic box model),将所有元素表示为一个个矩形的盒子(box)。

CSS 决定这些盒子的大小、位置以及属性(例如颜色、背景、边框尺寸…等)。盒模型由 content(内容)、padding(内边距)、border(边框)、margin(外边距)组成。

  1. content:由内容边界限制,容纳着元素的“真实”内容,例如文本、图像,或是一个视频播放器。
  2. padding:即内边距,负责延伸内容区域的背景(即内边距是透明的,受background影响),填充元素中内容与边框的间距。
  3. border:即边框,围绕元素内容的内边距的一条或多条线,由粗细、样式、颜色三部分组成。
  4. margin:即外边距,用空白区域扩展边框区域,以分开相邻的元素。

在CSS中,盒模型可以分为:

  • W3C 标准盒模型
  • IE 怪异盒模型

可以通过设置box-sizing属性设置盒模型类别:content-box、border-box。默认情况下,盒子模型为 content-box 标准盒模型。

二、标准盒模型

  1. width、height尺寸
  • width = 内容的宽度

  • height = 内容的高度

  1. 盒子尺寸
  • 盒子总宽度 = width + padding + border + margin
  • 盒子总高度 = height + padding + border + margin

三、IE盒模型

  1. width、height尺寸
  • width = border + padding + 内容的宽度

  • height = border + padding + 内容的高度

  1. 盒子尺寸
  • 盒子总宽度 = width + margin
  • 盒子总高度 = height + margin

四、box-sizing

CSS 中的 box-sizing 属性定义了引擎应该如何计算一个元素的总宽度和总高度,如下:

box-sizingcontent-box|border-box|inherit;

// content-box 默认值,元素的 width/height 不包含paddingborder,与标准盒子模型表现一致
// border-box 元素的 width/height 包含 paddingborder,与怪异盒子模型表现一致
// inherit 指定 box-sizing 属性的值,应该从父元素继承

参考文献

  • https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
  • https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing

pmcee

2021/06/06  阅读:37  主题:橙心

作者介绍

pmcee