css的盒模型一直是一个重点和难点，最近由后端的学习转到前端，觉得有必要深入研究一下css的盒模型。

1.万物皆盒子

我们必须要有一个理念，在html的世界里，万物皆盒子，那就是任何一个html元素都是一个盒模型。比如一个div，一个标题，一个段落。他们本质上都是一个盒模型。

2.盒模型的结构

如下所示。

注意它的宽度和高度指的是它元素的宽度和高度。元素到边框之间的区域叫做padding(内边距），边框在往外扩展的区域就叫做外边界。外边界就是整个盒模型能到达的最遥远的地方，也是保证其他的盒子不会侵袭这个盒子的边界线。

有几个点需要注意：

a.首先分析盒模型，要找准你分析的对象，比如一个div对象。上图中所有盒模型的所有术语（width,heghit，padding）都是针对该盒模型而言的。这时候你就不要去管它旁边的，或者它内部的其他元素。只需要分析这个对象就好了。

b.width和height指的是元素的宽度和高度，确切的说，应该是这个盒模型的元素可以使用的宽度和高度，事实上，它里面的元素可能并没有所规定的高度和宽度那么大，也有可能超出这个范围。但是在IE浏览器中，这个高度和宽度是内容区+内边距+边框的距离。我们可以通过box-sizing:border-box;来设置一个盒子是采用IE的模式来计算宽高。

c.background-color或者背景图像所填充的区域是包含元素+内边距的内容。利用这点我们可以来做一些实验。

d.边框和外边距之间的内容默认是透明的。

以上便是一个盒模型的所有元素。下面我们先来看一个例子，对盒模型有个直观的了解。

<body>

    <div id="box1">

        <h1>a box</h1>

    </div>

</body>

其css代码如下

* {

    margin:;

    padding:;

}

#box1 {

    background-color: #C6F08C;

    padding: 5px;

    color: white;

    margin: 5px;

    width: 300px;

    height: 300px;

}

因为有些浏览器默认会提供margin和padding，为了方便我们试验观察，这里我们先强制设为0，如上面的第一个css所示。运行上述的代码以后，我们看到页面展示的内容是这样的。

从这里你看不出什么东西，这时候可以利用google的f12,观察html元素。选中div id=“box1”这个元素，这时候将展示出他的盒模型，如下图所示。

你可以尝试勾选上图中box1的css元素，观察右侧html页面的实际变化，比如，当我们将padding:5px这个元素不选中以后，盒模型变成如下所示。

如果你自己操作，仔细观察，就会很明显的发现，划掉padding以后，这个box1的背景颜色的长度和宽度变小了，因为background包含的是element+padding，现在没有了padding，总的面积就减少了。另外一个变化是内容“a box"变得紧贴着边沿。同样是因为padding变为0了。元素和边框之间没有其他东西了。

读者可以在尝试划掉margin，就会发现整个盒模型紧贴着浏览器的边沿，如下所示。

我们继续做实验，把padding依然设为5，而把margin设为-10.看看这时候页面的样式。

我们发现浏览器的边沿侵占进了box1这个盒子的边沿（上边沿和下边沿），造成我们只看得到a box这行字的部分，事实上，box1的边框内部（包含padding和元素）是没有任何改变的，只是因为margin变为-10，则它的领地位置变得是从边框往里缩进了10个像素，也就是说放在它前后左右的其他盒子(如果没有盒子的话，就是浏览器的边沿）都可以侵占到它bordern内10个像素。

我们可以得出如下结论：

a.padding是针对box的元素而言的，它指代的是内部元素与边框之间的区域。

b.margin则是针对于其他的box而言的，它表示边框能到的最远位置，也是其他的盒子能接触该盒子的极限位置。

3.盒子中的盒子

经过上面篇幅的介绍，我们大概知道了盒模型的主要元素。现在我们在google浏览器中将目标定位在box1中的h1元素。按照任何对象都是一个盒子的理论，这也是一个盒子。我们来看一下它的布局。

我们看到，h1这个盒子，它的长X宽是300X42。margin和padding都是0.因为box1的长宽为300X300.所以整个h1到外边界的部分最大也就是300X300.我们可以做个试验，设置h1的padding和margin。

可以看到这时候的h1的element+padding+margin才是300.证明了我们的猜想：子盒子的外边界能到的最大地方就是父盒子的元素所规定的长宽。

4.盒子与盒子

再新建一个盒子，box2,其css如下所示。

#box2 {

    background-color: blue;

    width: 300px;

    height: 300px;

    padding: 5px;

}

观察到上面的css，我们没有设置box2的margin，来看看效果。

因为box2没有设置margin，所以它的左侧是紧挨着浏览器边缘的。但是由于box1设置了margin，所以box1和box2接壤的地方是有5px的空间隔离的。

我们设置一下box2的margin，设为5px，再看看效果。

我们发现，两个box的margin折叠了，也就是说box1的下外边距+box2的上外边距并不是5+5=10，而是只有5.事实上，假如我们将其中一方的margin设置得比另一方大，则会取大的那一方为准。如下所示。

不仅在兄弟盒子之间会发生折叠，父子盒子之间也会。比如说box4是box3的子元素，两者都设置了margin，并且box3没有设置padding和border，那么box3和box4的top margin将会重合，box3与兄弟盒子之间的top margin为box3与box4之间较大者。

#box3 {

    background-color: yellow;

    width: 300px;

    height : 300px;

    height: 300px;

    margin:5px;

/*     padding:5px; */

}

#box4 {

    background-color: green;

    width: 200px;

    height: 200px;

    margin:50px;

}

上述的css的效果如下。可以看到除了top margin,box4其他的方面都可以按照我们对盒子的原本理解来解释。不管的左、右，下外边距都是相对于box3的element来说的。（box3的element为300X300，box3的外边距设置为50，所以实际的box4的元素为200X200.）。但是如你所见，box4上外边距跟box3重合了，他共同跟外部盒子的上外边距为两者中的大者（50px）,而box3的左右下外边距依然是5px.

而一旦设置了box3的上内边距，则上述的折叠现象将不复存在。如下图所示。

外边距的折叠只发生在普通的块之间的垂直位置上，行内框、浮动框或绝对定位之间的外边距不会折叠的，比如说当一个盒子被标注成float的时候。如下所示。

可以发现两个盒子之间的margin为5+5=10了。

外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。

PS:当margin-left和margin-right都设为auto的时候，框将在父容器中自动居中。

总得来说，关于css的盒模型，要多去实践，才能发现其中的规律。

css盒模型研究的更多相关文章

  1. 尖刀出鞘的display常用属性及css盒模型深入研究

    一:diplay:inline-block 含义:指元素创建了一个行级的块级元素,该元素内部(内容)被格式化成一个块级元素,同时元素本身则被格式化成一个行内元素.更简单的说就是说inline-bloc ...

  2. 【前端盲点】DOM事件流论证CSS盒模型是否具有厚度

    前言 很久没有扯淡了,我们今天来扯淡吧. 我今天思考了一个问题,我们页面的dom树到底是如何渲染的,而CSS盒模型与javascript是否有联系,于是便想到一个问题: CSS的盒模型具有厚度么??? ...

  3. [k]css盒模型

    box-sizing :  content-box || border-box || inherit 1.content-box:此值为其默认值.元素的宽度/高度(width/height)等于元素边 ...

  4. 大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案

    概览 CSS盒模型,规定了元素框来处理元素的 内容.内边距.边框和外边距的方式 元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的, ...

  5. CSS盒模型

    CSS盒模型是CSS 可视化格式化系统的基石,它是理解样式表如何工作的核心概念.盒模型用于元素定位和页面布局.元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘 ...

  6. 第 16 章 CSS 盒模型[下]

    学习要点: 1.元素可见性 2.元素盒类型 3.元素的浮动 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一．元素可见性 使用 vis ...

  7. 第 16 章 CSS 盒模型[上]

    学习要点: 1.元素尺寸 2.元素内边距 3.元素外边距 4.处理溢出 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一．元素尺寸 C ...

  8. 7.css盒模型

    所谓的盒模型,其实就是把元素当成盒子,元素里的文本就是盒子里的东西. 而根据元素的特效,其盒模型的特效也不同,下面是一些总结: 1.块级元素(区块) 所谓块级元素,就是能够设置元素尺寸.有隔离其他元素 ...

  9. css盒模型和块级、行内元素深入理解

    盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互.页面上的每个元素都被看成一个矩形框,这个框由元素的内容.内边距.边框和外边距组成,需要了解的朋友可以深入参考下 一.CSS盒模型 盒 ...

随机推荐

  1. Flex布局学习笔记

    任何元素都可以使用Flex布局,包括行内元素 display: flex; display: inline-flex使用Flex布局之后,子元素的float, clear, vertical-alig ...

  2. [全排列]--A Number Puzzle

    标签: ACM Lele 最近上课的时候都很无聊,所以他发明了一个数字游戏来打发时间. 这个游戏是这样的,首先,他拿出几张纸片,分别写上0到9之间的任意数字(可重复写某个数字),然后,他叫同学随便写两 ...

  3. Shell编程基础篇-下

    1.1 条件表达式 1.1.1 文件判断 常用文件测试操作符 常用文件测试操作符 说明 -d文件,d的全拼为directory 文件存在且为目录则为真,即测试表达式成立 -f文件,f的全拼为file ...

  4. 《Linux命令行与shell脚本编程大全》第二十二章 gawk进阶

    gawk是一门功能丰富的编程语言,你可以通过它所提供的各种特性来编写好几程序处理数据. 22.1 使用变量 gawk编程语言支持两种不同类型的变量: 内建变量和自定义变量 22.1.1 内建变量 ga ...

  5. mysql 有哪些索引

    Mysql支持哪几种索引 从数据结构角度 1.B+树索引(O(log(n))):关于B+树索引,可以参考 MySQL索引背后的数据结构及算法原理 2.hash索引:a 仅仅能满足"=&quo ...

  6. PHP获取路径或目录实现

    <?php /**  * PHP获取路径或目录实现  */    //魔术变量,获取当前文件的绝对路径 echo "__FILE__: ========> ".__FI ...

  7. 前端测试框架Jest系列教程 -- Mock Functions

    写在前面: 在写单元测试的时候有一个最重要的步骤就是Mock,我们通常会根据接口来Mock接口的实现,比如你要测试某个class中的某个方法,而这个方法又依赖了外部的一些接口的实现,从单元测试的角度来 ...

  8. sublime text 3.0新版本注册码

    -– BEGIN LICENSE -– TwitterInc 200 User License EA7E-890007 1D77F72E 390CDD93 4DCBA022 FAF60790 61AA ...

  9. Android破解学习之路（二）——Android游戏 滚动的天空破解

    经过上一期的破解教程,相信大家跟我一样都是对破解是初入门,我们破解的目的是什么? 赚钱吗?百度上一大堆破解版的应用,破解的人有赚到钱吗?实实在在的说,其实也是方便自己而已. 玩个游戏,感觉过不去了,来 ...

  10. 一个简易的服务框架lsf

    项目地址:https://github.com/jianliu/lsf 主体思路是利用javaassist实现一个代理类,代理java的接口,实现每一个方法,实现的代码是对每个方法的名称.参数构建一个 ...