antd option宽度自适应_《CSS世界》笔记——宽度、高度拾遗

替换元素

根据是否具有可替换内容，可以把元素分为替换元素和非替换元素。通过修改某个属性值呈现的内容就可以被替换的元素称为“替换元素”。

常见的替换元素有<img>、<object>、<video>、<iframe>、<input>、<textarea>、<select>等。

替换元素特性：

1. 内容可替换。如改变img的src就可以替换图片。
2. 外观表现在CSS作用域之外。如单复选框无法通过CSS直接更改内间距、背景色等样式。
3. 有默认尺寸。表单的替换元素的默认尺寸和浏览器有关；<video>、<iframe>、<canvas>的默认尺寸一般为300像素x150像素；<img>替换元素默认尺寸一般为0像素。
4. 替换元素在一些CSS属性上有自己的一套表现规则。如vertical-align属性，vertical-align属性的默认值为baseline，对于非替换元素来说，baseline定义为字符x的下边缘；而替换元素的基线则指的是元素的下边缘。
5. 替换元素都是内联水平元素，其默认的display值为inline或者inline-block。对于替换元素来说，display的值不影响元素的宽度和高度计算规则。

替换元素计算规则：

规则：CSS尺寸 > HTML尺寸 > 固有尺寸。

1. 固有尺寸指的是替换内容原本的尺寸，或元素的默认尺寸，如图片本身的高度和宽度，input元素默认显示的尺寸。
2. HTML尺寸指的是使用HTML属性定义的尺寸。这个HTML属性包括<img>的width和height属性、<input>的size属性、<textarea<的cols和rows属性等。
3. CSS尺寸指的是通过CSS属性定义的尺寸信息，如width、height、min-width等。

首选最小宽度

首选最小宽度指的是元素最适合的最小宽度。在CSS中，图片和文字的权重要大于布局，因此外部容器width为0时，图文宽度并不会变成0，此时表现出的宽度就是“首选最小宽度”：

首选最小宽度的表现规则如下：

1. 中文最小宽度为每个汉字的宽度；
2. 英文最小宽度由特定的连续英文字符单元决定，一般止于空格、短横线、问号及其它非英文字符（word-break: break-all时最小宽度为每个字符的宽度）；
3. 替换元素（img、input等）的最小宽度为该元素内容本身的宽度，如下图所示。

宽度分离原则和box-sizing: border-box

宽度分离原则就是CSS中的width属性不与影响宽度的padding/border属性共存，，即不能出现类似以下组合：

.box {
  width: 100px;
  padding: 20px;
}

默认情况下元素的宽度是width、padding和border共同作用的结果，设计稿一旦更改，width需要重新计算，因此宽度分离的目的是便于维护和更改。

宽度分离实现方式有以下两种：

1. 使用box-sizing: border-box。（替换元素<input>、<textarea>要100%自适应父容器宽度，box-sizing必须为border-box。因为替换元素尺寸由内部元素决定，故设置display:block不能改变替换元素的宽度，故只有设置width: 100%才能使替换元素100%自适应父容器宽度；而<input>这些一般都有border和padding，于是width和border、padding要共存，同时还要整体宽度100%自适应容器，故box-sizing必须为border-box。

.box {
  width: 100px;
  border: 1px solid;
  box-sizing: border-box
}

1. 增加一层标签，width独立占用一层标签。

.father {
  width: 100px;
}
.son {
  padding: 0 20px;
  border: 1px solid;
}

min-width/max-width、min-height/max-height

1. min-width/min-height的初始值是auto，max-width/max-height的初始值是none；
2. min-width/max-width、min-height/max-height属性与width、height之间有一套相互覆盖的规则：超越 !important，超越最大。

• min-width/max-width权重大于!important：

• min的优先级高于max，即min-width覆盖max-width。

内联盒模型

1. 内联盒子（inline box）。内联盒子不会让内容成块显示，而是排成一行。
2. 行框盒子（line box）。每一行就是一个“行框盒子”，每个“行框盒子”是由一个一个“内联盒子”组成的。

strut（幽灵空白节点）

"Each line box starts with a zero-width inline box with the element's font and line height properties. We call that imaginary box a 'strut' ". 假想盒strut（幽灵空白节点）是HTML5文档中存在于每个“行框盒子”前面的具有该元素的字体和行高属性的0宽度内联盒。

如上所示，div、span的高度为0，但表现出的高度不为0，因为span元素前面有个宽度为0高度不为0的空白节点，撑起了整个行框盒子。