CSS盒子模型以及相关属性总结

1. 外边距

1. 声明定义

   外边距margin简写声明次序：

   • 上、右、下、左
   • 上、左右、下
   • 上下、左右
   • 上下左右

   属性值：可以为px、em、%，相对单位则为相对于父块级元素，如果属性值为负数，则表示与常规方向相反的方向移动

2. auto

   让浏览器自己选择一个合适的外边距，一般均分

   应用：元素居中对齐显示

   margin: 0 auto; # 表明上下边距为0 左右根据父盒子宽度均分设置

3. 外边距重叠

   块级元素会在垂直方向上发生外边距重叠的现象

2. 内边距

`padding`

1. 声明定义与margin一样

2. box-sizing

   规定了如何计算元素的总宽度和总高度

   在CSS盒子模型的默认定义里，对一个元素所设置的width和height只会应用到这个元素的内容区。如果这个元素有任何的border或padding，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距的值。这意味着当调整一个元素的宽度和高度时，需要时刻注意到这个元素的边框和内边距，如果要做响应式布局，则这个特点很烦人。

   而box-sizing属性可以被用来调整这些表现：

   属性值：

   • content-box

     默认值。如果设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素的宽度中。

     尺寸的计算公式：

     width = 内容的宽度

     height = 内容的高度

     宽度和高度的计算值都不包含内容的边框和内边距

   • border-box

     告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果将一个元素的width设为100px，那么这个100px会包含它的border和padding，内容区的实际高度是width减去(border+padding)的值。

     尺寸的计算公式：

     width = border + padding + 内容区的宽度

     height = border + padding + 内容区的高度

     因此，只要设置固定的width和height，那么这个元素的实际绘制的宽和高便不会发生变化，但是有一种情况例外：当border/padding任一方的值大于所设置的width的值，那么内容区默认宽/高为0，实际绘制出来的宽和高为border/padding的大小，而不再是最开始设置的width的值。

3. 边框

3.1边框样式

边框border简写声明次序：

• 上、右、下、左
• 上、左右、下
• 上下、左右
• 上下左右

属性值

边框宽度border-width和边框颜色border-color都和border-style一样可以分别进行设置

且可以将三个属性统一对某一边进行设置

border-top: solid 5px red;(顺序没有要求)

3.2 自定义边框样式

可以通过border-image来自定义边框的样式

语法：

border-image: image-source image-height image-width image-repeat

3.3 圆角边框

border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius

可以通过border-radius简写，次序如下：

• 上左、上右、下左、下右
• 上左、上右+下左、下右
• 上左+下右、上右+下左
• 一起

单位值：

• px 以该大小画个圆弧
• 百分比 如果是正方形，则针对于宽度的百分比，如果是方形，则水平长轴以元素宽度采取百分比，垂直长轴以元素高度采取百分比

如果是一个属性值，则表明是以圆弧来创建圆角的，如果是两个属性值，则表明是以椭圆弧来创建

例子：

border-radius: 1em/5em;（采用斜线的方式：表示以椭圆弧来绘制圆角边框）

/* 等价于： */

border-top-left-radius:     1em 5em;
border-top-right-radius:    1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius:  1em 5em;

border-radius: 4px 3px 6px / 2px 4px;

/* 等价于： */

border-top-left-radius:     4px 2px;
border-top-right-radius:    3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius:  3px 4px;

4. 轮廓线

outline，和border类似，作为outline-style、outline-width、outline-color的简写。但是不同于border在于：

• outline不占据空间，绘制于元素内容周围，也即包括margin在内的元素外进行绘制
• 根据规范，outline通常是矩形，但也可以是非矩形的。

注意：对于很多元素来说，如果没有设置样式，轮廓是不可见的。因为样式（style）的默认值是 none。但 input 元素是例外，其样式默认值由浏览器决定。因此可以通过outline:none去除表单默认轮廓。

5. display元素显示类型

display设置元素的内部和外部显示类型

5.1 外部显示类型<display-outside>

决定该元素在流式布局中的表现（块级/内联元素）

1. 流式布局

   文档流或流式布局都是在对布局进行任何更改之前，在页面上显示“块”和“内联”元素的方式。这个“流”本质上是一系列的事物，它们都在布局中一起工作。一旦某部分脱离了“流”，他就会独立的工作。

2. block

   1. 特点

      1. 独占一行，带有换行
      2. 高度、宽度、外边距、内边距都可以控制
      3. 宽度默认为父级宽度的100%
      4. 是一个容器及盒子，里面可以放行内/块级元素

   2. 注意

      文字类的块级元素最好不要放其他的块级元素，如果放了 其实现效果其实是：将块级元素抽离出来单独放置

3. inline

   1. 特点
      1. 一行可以显示多个
      2. 高度、宽度直接设置无效
      3. 默认宽度是其本身内容的宽度
      4. 行内元素只能容纳文本和其他的行内元素
   2. 注意
      1. 链接里面不能放链接
      2. 特殊情况下链接a可以放块级元素 但是给a转换为块级类型最安全

4. inline-block

   1. 特点
      1. 和相邻行内元素在一行上，但是他们之间会有空白缝隙，一行可以显示多个
      2. 默认宽度是其本身内容的宽度
      3. 高度、行高、外边距以及内边距都可以控制
   2. 所属
      1. img
      2. input
      3. td

5. 元素显示类型转换

   1. 转换为块级元素 display:block
   2. 转换为行内元素 display:inline
   3. 转换为行内块元素 display:inline-block
   4. 隐藏元素：none，此方式隐藏元素会remove it from the document layout

5.2 内部显示类型

控制子元素的布局（flow layout,grid,flex等）

flex、grid都是根据将元素转换为block element 但是真正的显示还是取决于其对应的模型，也即flexmode、gridmode

6. visibility控制元素显示隐藏

属性值

• visible 元素正常显示
• hidden 元素被隐藏

不同于display，visibility隐藏元素之后，空间位仍然保留（也即在显示的时候仍然可以看到原来的位置），但是display空间位被移除。（不常用）

7. 元素尺寸设置

7.1 min&max-

min-width表示如果当前元素原来宽度小于给定的最小宽度，则设置该元素为给定的宽度，否则没有变化。适用场景：响应式布局。

<div>
    <img src="../images/2.PNG" alt="">
</div>

<style>
div {
    width: 200px;
    height: 200px;
    border: 1px solid red;
}

div > img {
    max-width: 90%; // 设置图片最大宽度为父容器的90%，因此可以根据父容器的大小响应式调整
}
</style>

7.2 fill-available自动撑满可用空间

针对于块级元素/行内块元素的设置

注：对于chrome浏览器中使用需要添加前缀-webkit

<main>
    <div>子元素</div>
</main>

<style>
    main {
    width: 200px;
    height: 200px;
    background-color: red;
}

div {
    background-color: yellow;
}
</style>

一般块级元素的宽会和父元素的宽一致，但是高度则会根据内容的宽度来显示，但是有时候需要将其高度设置为撑满父元素剩余可用空间，此时可以通过fill-avaliable来设定

<style>
main {
    width: 200px;
    height: 200px;
    background-color: red;
}

div {
    background-color: yellow;
    height: -webkit-fill-available; // 设置该元素的高，为自适应添加高度，但是在有些IDE会报错，但是不影响其的显示效果
}
</style>

7.3 fit-content根据元素内容适应尺寸大小

根据元素的内容自动调节元素的宽和高

<main>
    <div>子元素</div>
</main>

<style>
main {
     width: 200px;
     height: 200px;
     background-color: red;
 }

div {
    background-color: yellow;
    width: fit-content; // 使其宽根据内容调节宽度
    margin: 0 auto; // 将调节之后的块级元素居中显示
}
</style>

box_01.png

7.4 min-content/max-content

如果容器中有不相同长度的元素内容，则可以通过min-content/max-content选择最长/最短的元素内容自适应可显示宽度。一般在父元素上进行设置