原本依照失常的学习程序, 应该是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咱们后面写的文章也会有这样的布局问题，两者是通用的。

参考资料

  • 千古前端图文教程 https://web.qianguyihao.com/0...
  • mdn web docs https://developer.mozilla.org...
  • CSS 中的泛滥盒子概念怎么辨别？ https://www.zhihu.com/questio...