[CSS] 什么是CSS盒模型 块级盒子和内联盒子的区别

什么是盒子模型

• CSS处理网页时,它认为每个元素都包含在个不可见的盒子里。为什么要想象成盒子呢?因为如果把所有的元素都想象成盒子,那么我们对网页的布局就相当于是摆放盒子。我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。

• 完整的 CSS 盒模型应用于块级盒子，内联盒子只使用盒模型中定义的部分内容。模型定义了盒的每个组成部分 —— 包括margin, border, padding, and content —— 合在一起就可以创建我们在页面上看到的内容。

• 一个盒子我们会分成几个部分:内容区(content)，内边距(padding)，边框(border)，外边距(margin)。

  CSS中组成一个块级盒子需要:

  Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height。蓝色区。

  Padding box: 包围在内容区域外部的空白区域； 大小通过 padding 相关属性设置。绿色包围区。

  Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。黄色包围区。

  Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置.
  

• 有两种盒子模型：IE盒模型（border-box）、W3C标准盒模型（content-box）

• W3C标准盒模型：属性width，height只包含内容content，不包含border和padding

• IE盒模型：属性width，height包含content、border和padding，指的是content+padding+border

• 在ie8+浏览器中使用哪个盒模型可以由box-sizing（CSS新增的属性）控制，默认值为content-box，即标准盒模型；如果将box-sizing设为border-box则用的是IE盒模型。如果在ie6，7，8中DOCTYPE缺失会将盒子模型解释为IE盒子模型。若在页面中声明了DOCTYPE类型，所有的浏览器都会把盒模型解释为W3C盒模型。

盒子的四个组成部分

内容区

边框

• 边框可以使用border简写来同时设置4个方向的属性。也可以分别使用border-top，border-bottom，border-left，border-right设置四个方向的边框。
• 使用width，height属性设置的默认是内容区的宽度和高度。

.box1{
    width: 100px;
    height: 100px;
    background-color: greenyellow;
    /**
        * 边框样式1：border-width 边框宽度
        *   如果指定1个值，4个边一样的框大小
        *   如果指定四个值，分别指定给上右下左
        *   如果指定3个值 10px 20px 30px
        *       那么上10px 右左20px 下30px
        *   如果指定2个值 10px 20px
        *       那么上下10px 右左20px
        *   这个规则示适用于color style
        *   除了border-width css还提供了border-top-width等
        *
        * 边框样式2：border-color 边框颜色
        *
        * 边框样式3:border-style 边框样式
        *   可选值
        *       none 默认值 无边框
        *       solid 实线
        *       dotted 点状
        *       dashed 虚线
        *       double 双线
        */
    border-width: 10px 20px 30px 40px;
    border-color: red yellow green olive; 
    border-style: solid;
}

/**
* 设置边框
*   大部分浏览器，边框的宽度和颜色都是有默认值的，而边框的样式的默认值是none
*  所以一般指定一个border-style 边框就能显示出来
*/

内边距

• 内边距位于边框和内容区域之间。与外边距不同，不能有负数量的内边距，所以值必须是0或正的值。应用于元素的任何背景都将显示在内边距后面(也就是设置的背景会在内容区和内边距区域显示)。内边距会影响盒子的可见框的大小，元素的背景会延申到内边距。

• 内边距同样可以使用padding简写，同时设置4个方向的属性。也可以分别使用padding-top，padding-bottom，padding-left，padding-right设置四个方向的内边距。

• 盒子的大小由内容区，内边距，边框共同决定。盒子可见框的宽度=border-left-width+padding-left-width+width+padding-right+border-right-width。

• 当元素的宽度的值为auto时，此时指定padding，不会影响可见框的大小，而是自动修改内容区宽度，以适应内边距。 ⭐

外边距

• 外边距是盒子周围一圈看不到的空间。它会把其他元素从盒子旁边推开。外边距指定本盒子与其他盒子的距离，不会影响可见框的大小。 外边距属性值可以为正也可以为负。设置负值会导致和其他内容重叠。
• 外边距同样可以使用margin简写，同时设置4个方向的属性。也可以分别使用margin-top，margin-bottom，margin-left，margin-right设置四个方向的外边距。
• 由于页面中的元素都是靠左摆放的，所以我们设置左和上外边距时，会改变盒子的位置，而如果是设置右或下边距时，会去挤走其他盒子。
• margin还可以设置为auto，如果只指定，左外边距或者右外边距为auto，则会将外边距设置为最大值，比如将左外边距设为auto，那么盒子将会置于父容器的最右侧；如果将左右外边距都设置为auto，那就可以使元素在父元素中水平居中。

块级盒子和内联盒子的行为表现区别

在 CSS 中我们广泛地使用两种“盒子” —— 块级盒子 (block box) 和 内联盒子 (inline box)。

块级元素	行内元素
div就是一个块元素，块元素就是会独占一行，高度被内容撑开。p,br,h1,h2…都是块元素	span是一个内联元素（行内元素）。所谓的行内元素，指的是只占自身大小的元素，高度和宽度都是内容撑开。不会占用一行。a,img,iframe,span都是内联元素。
独占一行(盒子会在内联方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽) 默认高度由内容撑开	高度和宽度都由内容撑开；只占自身大小；
每个盒子都会换行	盒子不会产生换行
width 和 height 属性可以发挥作用	width 和 height 属性无效(不起作用)
内边距（padding）, 外边距（margin） 和 边框（border） 会将其他元素从当前盒子周围“推开”	垂直方向的内边距以及边框会被应用但是不会影响布局，不会把其他处于 inline 状态的盒子推开。 垂直方向的外边距无效。 水平方向的内边距、外边距以及边框会被应用而且也会把其他处于 inline 状态的盒子推开。
除非特殊指定，诸如标题h1和段落p等默认情况下都是块级的盒子。	用做链接的a 元素、 apan、 em 以及 strong 都是默认处于 inline 状态的

span{
    width: 100px;/*设置了无效*/
    height: 100px;/*设置了无效*/
    padding-left: 100px;/*影响布局*/
    padding-right: 100px;/*影响布局*/
    padding-top: 50px;/*有效不影响布局*/
    padding-bottom: 50px;/*有效 不影响布局*/
    border: blue 50px solid;/*有效  左右影响布局 垂直不影响布局*/
    margin-left: 100px;/*有效 影响布局*/
    margin-right: 100px;/*有效 影响布局*/
    margin-top: 100px;/*设置了无效*/
    margin-bottom: 100px;/*设置了无效*/      
}

内联元素变块元素display属性

元素都有默认的显示类型。我们通过对盒子display 属性的设置，比如 inline 或者 block ，来控制盒子的外部显示类型。

• display 属性可以改变盒子的外部显示类型是块级(block)还是内联(inline)，这将会改变它与布局中的其他元素的显示方式。
• display有一个特殊的值(inline-block)，它在内联(inline)和块(block)之间提供了一个中间状态。
  1. inline-block:可以将将一个元素转为行内块元素，可以使一个元素既有行内元素的特点，又有块元素的特点(可以设置高宽，又不会独占一行)。
  2. none：此元素不会被显示，隐藏元素，并且该元素不会占用位置了。
  3. block：设置元素为块级显示。
  4. inline：设置元素为内联显示。

参考

https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model