css盒子模型_说说css盒子模型

什么是盒模型

引用MDN官方的解释：

当对一个文档进行布局（lay out）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸…）。每个盒子由四个部分（或称区域）组成，其效用由它们各自的边界（Edge）所定义（原文：defined by their respective edges，可能意指容纳、包含、限制等）。如图，与盒子的四个组成区域相对应，每个盒子有四个边界：内容边界 Content edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。

文字看起来有些苍白，我们举例说明（Talk is cheap，show me code）

定义一个样式：

应用样式

那么他的盒子模型是这样的（chrome浏览器）：

这张图可以清晰的反应出来元素的内容尺寸、边框大小、内边距大小和外边距大小。这样就是理想的展现方式，也是符合我们的理解逻辑的：

盒模型 = 内容尺寸 + 内边距 + 边框尺寸 + 外边距（内边距、边框、外边距各个方向上需要计算2倍）

一切都是这么完美。但是，IE来了...

IE的特殊盒子模型

我们以同样的样式和元素来作为例子，在ie浏览器中的盒子模型则有很大的不同

我们在样式中定义的尺寸很明显：width:100px;height:100px; 但是这里的内容尺寸则为122 x 122；这个数字刚好是内边距(10*2) + 边框(1*2) 的和，所以IE的内容边界包括了内边距和边框。所以在IE中：

盒模型 = 内容（内容边界+内边距*2+边框*2）+ 外边距

css盒子模型_说说css盒子模型相关推荐

css flexbox模型_完整CSS课程-包括flexbox和CSS网格
css flexbox模型 Learn CSS in this complete 83-part course for beginners. Cascading Style Sheets (CSS) ...
机器学习结构化学习模型_生产化机器学习模型
机器学习结构化学习模型 The biggest issue in the life-cycle of ML project isn't to create a good algorithm or to ...
css覆盖规则_条件 CSS
在CSS的世界中,总是有很多实验性的属性先行,正因为这些先行者在不断的探索新的特性,才让CSS越来越强大.而这些实验性的特性并没有立马得到众多浏览器的支持,为了能让这些实验性特性能在部分支持的浏览器上 ...
一般线性模型和线性回归模型_您的线性回归模型指南
一般线性模型和线性回归模型 Interpretability is one of the biggest challenges in machine learning. A model has mor ...
css 绘制三角形_解释CSS形状：如何使用纯CSS绘制圆，三角形等
css 绘制三角形 Before we start. If you want more free content but in video format. Don't miss out on my Y ...
软件工程生命周期模型_软件生命周期模型比较| 软件工程
软件工程生命周期模型软件生命周期模型 (Software Lifecycle Models) There are five software lifecycle models that are co ...
空间计量模型_截面数据空间计量模型空间误差模型及Stata操作和应用
来源:计量经济学服务中心编辑整理,转载请联系1 前言空间分析起源于地理学.空间经济学和相关学科.到目前为止,它被认为是专业的领域,因此不是大多数统计软件的标准部分.就stata而言,有许多用户编写的 ...
非期望产出的sbm模型_线性模型 vs. Logistic模型——离散选择模型之二
前言:为什么因变量是分类变量的时候,我们会选择Logistic模型.而非最常见的线性回归模型?或者,换个说法:线性回归模型的劣势是什么?Logistic模型的优势又是什么?--针对这些问题,本文为您详 ...
[并发并行]_[线程模型]_[Pthread线程使用模型之一管道Pipeline]
场景 1.经常在Windows, MacOSX 开发C多线程程序的时候, 经常需要和线程打交道, 如果开发人员的数量不多时, 同时掌握Win32和pthread线程并不是容易的事情, 而且使用Win ...

css盒子模型_说说css盒子模型

什么是盒模型

css盒子模型_说说css盒子模型相关推荐

最新文章

热门文章