本来按照正常的学习顺序, 应该是HTML、CSS、JavaScript，再到Vue。但是到我这里顺序就反过来了一样，先Vue 、再JavaScript，然后CSS。原因在于我之前就学习过这些，虽然当初学的不扎实，但是勉强能用，需要用到什么，然后忘记了就重新再学习一下，这看起来像是逆生长一样，但后面会将这个系列的文章补齐。
前言
在上海地铁是大多数人的通勤方式，有的时候地铁人多，就会很拥挤，那拥挤表达的意思是什么呢？ 我想是人与人之间的距离很小吧。如果将人视做html的元素，那么人与人间的距离在在CSS中称为margin，也被称为外边距。但是人和HTML的标签还是有些区别，HTML的元素分块级元素和行内元素、
块级元素(Block-level elements)
那什么是块级元素？ 简单的说就是块级元素占满一行，如下图所示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p>This</p> </body> <style> p { background-color: #8ABB55; } </style> </html>
效果图:
虽然标签p的内容只有一个this，但是当我们为它添加上背景色，你会发现整个一行都出现了绿色。细心的朋友运行代码之后可能会说也没占满一行啊，旁边还有两个空白啊。那是因为我们写的p标签在body标签里面，body标签是一个更大的盒子:
浏览器给body默认的margin大小是8个像素, 我们可以通过浏览器的工具来验证我们的论断:
然后我们将body标签的margin清空就会发现p标签完全占一整行:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p>This</p> </body> <style> p { background-color: #8ABB55; margin: 0px; } body{ margin: 0px; } </style> </html>
所以块级元素占据其父元素的整个水平空间，高度等于其内容高度，像是一块一样，所以被称为块级元素。所以两个块级元素不能位于一行，默认情况下在块级元素之后，再写块级元素，块级元素会新起一行。以下是HTML中所有的块级元素列表:
- address article aside blockquote dd div
- dl fieldset figcaption figure footer h1-h6 form
- header hgroup hr ol p pre section table ul
行内元素
那我们可以类比块级元素对行内元素下定义，块级元素占据一行，那行内元素就是只占据它对应标签的边框所包含的空间:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p>This <span>span</span> is an inline element; its background has been colored to display both the beginning and end of the inline element's influence</p> </body> <style> span { background-color: #8ABB55; } </style> </html>
一般情况下，行内元素只能包含数据和其他行内元素。而块级元素可以包含行内元素和其他块级元素。默认情况下，行内元素不会以新行开始，而块级元素会新起一行。下面的元素都是行内元素:
- b, big，i，samll，tt。
- abbr，acronym，cite，code，dfn，em，kbd，strong，samp，var。
- a，bdp，br，img，object，q，script，span，sub，sup
- button，input，label，select，textarea。
盒子模型
但内容之间通常有距离还往往不够用，就像一幅画一样，我们为了保护这幅画通常会买一个画框，通常画框会比要装的画大一些，起到留白的效果:
当然也有padding(padding为0)的，浏览器的渲染引擎会根据标准之一的CSS基础盒模型(CSS basic box model),将所有的元素表示为一个个矩形的盒子(box)。根据网页中声明的CSS，来决定这些盒子的大小、位置、以及属性(例如颜色、背景、边框尺寸)。每个盒子都由四个部分来组成，如上面的图片所示，每个盒子有四个组成区域
- 内容区域 content area：容纳着元素的“真实内容”，例如文本、图像。它的尺寸为内容宽度和内容高度。通常含有一个背景颜色或背景图像。
如果box-sizing 这个属性为默认属性即content-box，则内容区域可以通过明确的width、min-width、max-width、height、min-height，和max-height控制。
- 内边距区域 padding area: 扩展内容区域，间距的大小可以通过明确的padding-top、padding-right、padding-bottom、padding-left和简写属性padding来控制。
- 边框区域 border area: 扩展内边距区域，是容纳边框的区域，边框的粗细由border-width和简写的border属性控制，如果boder-sizing属性被设置为border-box。那border区域的大小可以明确通过width、min-width, max-width、height、min-height，和 max-height 属性控制。假如框盒上设有（background-color 或 background-image），背景将会一直延伸至边框的外沿（默认为在边框下层延伸，边框会盖在背景上）。此默认表现可通过 CSS 属性 background-clip 来改变。
- 外边距区域 margin area: 即盒子与盒子的距离，外边距的大小由 margin-top、margin-right、margin-bottom、margin-left，和简写属性 margin 控制。在发生外边距合并的情况下，由于盒之间共享外边距，外边距不容易弄清楚。
上面我们提到的就属于盒子模型，一般我们称之为标准盒模型。在标准盒模型中，如果你给盒子本身设置width和height，实际上设置的是content box，即内容的长宽高。padding和border再加上设置的宽高一起决定盒子的大小。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p>This</p> </body> <style> p { background-color: #8ABB55; margin: 10px; width: 200px; padding: 10px; border-width:10px; border-style: solid; border-color: blue; } body{ margin: 0px; } </style> </html>
实际效果:
IE盒子模型
某些时候标准盒子模型也让我们产生困扰，难道我们我们不能直接设置整个盒子的宽高吗？ 还要加上border和padding，这很麻烦。IE模型中，内容宽度是设置的宽度减去边框和填充部分。一般情况下浏览器采用的都是标准模型，如果需要使用IE模型，可以通过设置box-sizing: border-box来实现。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p>This</p> </body> <style> p { box-sizing: border-box; background-color: #8ABB55; margin: 10px; width: 200px; padding: 10px; border-width:10px; border-style: solid; border-color: blue; } body{ margin: 0px; } </style> </html>
如果你希望所有元素都使用IE盒子模型，那我们可以将box-sizing在html元素上，然后设置所有元素继承该属性，如下面代码所示:
html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; }
IE浏览器默认使用IE盒子模型，不支持切换标准盒子模型（IE8+ 支持使用box-sizing进行切换）
块级盒子和内联盒子
HTML中元素分为块级元素和行级元素，在CSS中盒子也分为块级盒子和内联盒子。块级盒子由块级元素产生，内联盒子由行内元素产生。块级元素会表现出以下行为:
- 盒子会在内联方向扩展并占据父容器在该方向上所有可用空间，在绝大多数情况下意味着盒子会和父容器一样宽。
- 块级盒子不能并列，每个盒子独占一行。
- width和height属性可以发挥作用
- 内边距(padding), 外边距(margin)和边框(border)会将其他元素从当前盒子周围推开。
除非特殊指定，注入标题h1等和段落在默认情况下都是块级的盒子。我们可以通过display属性来将当前元素设置为块级元素或内联元素。display常见的属性有:
- block: 将当前盒子设置为块级盒子
- inline: 将当前盒子设置为内联盒子
- inline-block: 我们有的时候会希望元素具备宽度和高度属性，但是有具备同行特性。在这种情况下就要可以使用inline-box。
如果一个盒子为内联盒子，那么这个盒子具备以下性质:
- 盒子不会换行
- width和height属性不起作用
- 垂直方向的内边距(padding)、外边距(margin)以及边框(border)会被应用但是不会把其他处于
inline状态的盒子推开。 - 水平方向的内边距、外边距以及边框会被应用且会把其他处于
inline状态的盒子推开。
用做链接的 <a> 元素、 <span>、 <em> 以及 <strong> 都是默认处于 inline 状态的。
我们可以通过display属性的设置，比如inline或者block，来控制盒子的外部显示类型。那么有外部显示类型，就会有内部显示类型。外部显示类型决定盒子是块级还是内联，而内部显示类型则决定盒子内部元素是如何布局的。默认情况下和其他块元素以及内联元素一样。但是我们也可以通过使用flex的display属性值来更改内部显示类型。如果设置display：flex，在一个元素上，外部显示类类型是block，但是内部显示类型修改为flex。该盒子的所有直接子元素都会变成flex元素，会根据弹性盒子flexbox 规则进行布局，我们会在后文介绍这些内容。
块级和内联布局是web上的默认行为，有的时候，他们也被称为正常文档流。
外边距
外边距是盒子周围一圈看不到的空间。它会把其他元素从盒子旁边推开。外边距属性值可以为正，也可以为负。设置负值会导致和其他内容重叠。无论使用标准模型还是替代模型，外边距总是在计算可见部分后额外添加。我们可以使用margin属性一次控制一个元素的所有边距，或者每边单独使用等价的普通属性控制:
- margin-top
- margin-right
- margin-bottom
- margin-left
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="container"> <div class="box">Change my margin.</div> </div> </body> <style> .box { margin-top: -40px; margin-right: 30px; margin-bottom: 40px; margin-left: 4em; border: 5px solid rebeccapurple; background-color: lightgray; padding: 10px; height: 150px; } .container { border: 5px solid blue; margin: 40px; } </style> </html>
尝试更改外边距的值，感受一下在外边距设置为正时是如何推开周边元素，以及设置为负时是如歌重叠的。
外边距折叠
理解外边距的一个关键是外边距折叠概念，如歌你有两个外边距相接的元素，这些外边距将合并为一个外边距，即最大的单个外边距的大小。在下面的例子中，我们有个两个p标签，第一个标签的margin-bottom为50px。第二段的margin-top为30px。因为外边距折叠的概念，所以框之间的实际外边距是50px，而不是两个外边距的总和。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="container"> <p class="one">I am paragraph one.</p> <p class="two">I am paragraph two.</p> </div> </body> <style> .container { border: 5px solid blue; margin: 100px; } p { border: 5px solid rebeccapurple; background-color: lightgray; padding: 10px; } .one { margin-bottom: 50px; } .two { margin-top: 30px; } </style> </html>
可以尝试修改一下.two的margin-top，只要小于50px，两者的距离不会发生变化，当大于五十的时候按.two的折叠。
内边距
内边距位于边框和内容区域之间。与外边距不同，不可以设置负值。应用于元素的任何背景色都将显示在内边距中。我们可以使用padding简写属性控制元素所有边，或者每边单独使用等价的普通属性:
- padding-top
- padding-right
- padding-bottom
- padding-left
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="container"> <div class="box"> 改内边距</div> </div> </body> <style> .container { border: 5px solid blue; margin: 40px; padding: 20px; } .box { padding-top: 40px; padding-right: 20px; padding-bottom: 40px; padding-left: 4em; border: 5px solid rebeccapurple; background-color: lightgray; } </style> </html>
边框
相对于内边距和外边距，边框的属性很多，可以设置边框的宽度、边框颜色，边框样式(边框是虚线 还是直线)。上面的例子我们已经有意无意的用过了：
border: 5px solid blue;
这是为四个边框统一设置宽度、样式、颜色。我们也可以分别设置四个边框的宽度、样式、颜色:
- border-top
- border-right
- border-bottom
- border-left
设置所有边的宽度、样式、颜色也可以这么声明:
- border-width
- border-style
- border-color
我们也可以单独设置每个边的宽度、样式、颜色:
- border-top-width
- border-top-style
- border-top-color
- border-right-width
- border-right-style
- border-right-color
- border-bottom-width
- border-bottom-style
- border-bottom-color
- border-left-width
- border-left-style
- border-left-color
总结一下
盒子模型类似于搬家之后对东西进行重新摆放，这也被称为布局，如果房子小，margin就会小就会显得很拥挤。一个良好的布局会让居住者赏心悦目。本篇基本参考了《千古前端图文教程》，《MDN web docs》。这里用我自己的方式将这些内容整合了一下。注意JavaFX我们前面写的文章也会有这样的布局问题，两者是通用的。
