关于css:CSS学习笔记一-盒子模型

原本依照失常的学习程序, 应该是 HTML、CSS、JavaScript，再到 Vue。然而到我这里程序就反过来了一样，先 Vue、再 JavaScript，而后 CSS。起因在于我之前就学习过这些，尽管当初学的不扎实，然而勉强能用，须要用到什么，而后遗记了就从新再学习一下，这看起来像是逆成长一样，但前面会将这个系列的文章补齐。

在上海地铁是大多数人的通勤形式，有的时候地铁人多，就会很拥挤，那拥挤表白的意思是什么呢？我想是人与人之间的间隔很小吧。如果将人视做 html 的元素，那么人与世间的间隔在在 CSS 中称为 margin，也被称为外边距。然而人和 HTML 的标签还是有些区别，HTML 的元素分块级元素和行内元素、

那什么是块级元素？简略的说就是块级元素占满一行，如下图所示:

<!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>

实际效果:

某些时候规范盒子模型也让咱们产生困扰，难道咱们咱们不能间接设置整个盒子的宽高吗？还要加上 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…

关于css:CSS学习笔记一-盒子模型

前言

块级元素(Block-level elements)

行内元素

盒子模型

IE 盒子模型

块级盒子和内联盒子

外边距

外边距折叠

内边距

边框

总结一下

参考资料