《css 世界》宽度

1. width: auto

auto 是默认值，至少包含 4 种不同的宽度表现：

1. 充分利用可用空间。比如 <div> <p> 宽度默认 100% 于父级元素。 fill-available
2. 收缩于包裹。比如浮动、绝对定位、inline-block、table，英文称为 shrink-to-fit。css3 中的 fit-content
3. 收缩到最小。最易出现在 table-layout 为 auto 的表格中。min-content.
   当父级 relative，且宽度很小的时候，absolute 元素也会出现一柱擎天的情况。
4. 超出容器限制。除非有明确的 width 设置，否则上述三种情况均不会超出容器限制。特殊情况，如内容很长的连续的英文和数字，或内联元素被设置了 white-space: nowrap. max-content

2. 格式化宽度

格式化宽度仅出现在“绝对定位模型”中，即 position 的值为 absolute 或 fixed 的元素中，默认情况下，绝对定位元素的宽度表现为“包裹性”，宽度由内部尺寸决定，但有一种情况由外部尺寸决定：

对于非替换元素，当 left/right 或 top/bottom 对立方位的属性值同时存在，元素的宽度表现为“格式化宽度”，其宽度大小相对于最近的具有定位特性（position 不为 static）的祖先元素计算。

3. 内部尺寸与流体特性

内部尺寸，即元素的尺寸由内部的元素决定，而非由外部的容器决定。如何判断？假如一个元素里面没有内容，宽度是 0，那么这个元素就是应用了“内部尺寸”。

1. 包裹性和自适应性
   内部尺寸具有包裹性和自适应性，即元素尺寸由内部元素决定，但永远小于“包含块”容器的尺寸（除非容器尺寸小于元素的“首选最小宽度”）。
   例子：button 按钮，inline-block 元素，内部文字越多，会在容器的宽度处自动换行。
   <input type="button" value="按钮" 默认 white-space:pre 是不会换行的，需要改成 white-space: normal
   按钮换行效果
   实用： 一行文本居中对齐，多行文本居左对齐

.box {
    text-align: center;
}

.content {
    display: inline-block;
    text-align: left;
}

2. 首选最小宽度
   指的是元素最适合的最小宽度。
   在 CSS 中，图片和文字的权重要远大于布局。比如外部容器宽度 0px，里面的 inline-block 元素不会在 width:auto 时变为 0 的。此时表现的宽度就是“首选最小宽度”。
   具体规则如下：

   1. 东亚文字（如中文）最小宽度为每个汉字的宽度。
   2. 西方文字最小宽度由特定的连续的英文字符单元决定。并不是所有的英文字符都会组成连续单元，一般会终止于空格、短横线、问号以及其他非英文字符。
      如果想让英文字符和中文一样，每个字符都用最小宽度单元，可以使用 word-break: break-all
      case
      use：“凹”“凸”效果

3. 最大宽度
   最大宽度就是元素可以有的最大宽度，zxx 是这么理解的：“最大宽度”实际等同于“包裹性”元素设置 white-space: nowrap 声明后的宽度。如果内部没有块级元素或块级元素没有设定宽度值，则“最大宽度”实际上是最大的连续内联盒子的宽度。

4. 宽度分离

宽度最佳实践：width 属性不与影响宽度的 padding 、border（有时包含 margin）属性共存。width 独占一层标签。

.father {
    width: 180px;
}

.son {
    margin: 0 20px;
    padding: 20px;
    border: 1px solid;
}

5. box-sizing

width 默认作用位置在 content box 上。box-sizing 改变了 width 的作用位置

content-box (default)
padding-box
border-box

box-sizing发明初衷：原生普通文本框 <input> 和 <textarea> 的 100%自适应父容器宽度。

拿 textarea 来说，它作为替换元素，特性之一就是尺寸由内部元素决定，且无论其 display 值为 inline 还是 block。对于非替换元素，如果其 display 为 block，具有流动性，宽度由外部尺寸决定，但对于替换元素的宽度不受 display 的影响，因此，通过修改 textare 的 display 是无法让尺寸 100%自适应父容器的。

textarea {
  width: 100%;
  box-sizing: border-box;
}

case
推荐：

input, textarea, img, video, object {
  box-sizing: border-box;
}