内、外部尺寸与流体特性

两层盒子

每个元素都两个盒子， 外在盒子和内在容器盒子。外在盒子负责元素是可以一行显示，还是只能换行显示;内在容器盒子负责 宽高、内容呈现什么的。按照display的属性值不同，值为 block的元素的盒子实际由外在的“块级盒子” 和内在的“块级容器盒子”组成，值为inline-block的元素则由外在的“内联盒子”和内在的“块级容器盒子”组成，值为 inline的元素则内外均是“内联盒子”。

盒子分“内在盒子”和“外在盒子”，显示也分“内部 显示”和“外部显示”，同样地，尺寸也分“内部尺寸”和“外部尺寸”。其中“内部尺寸”英 文写作“Intrinsic Sizing”，表示尺寸由内部元素决定;还有一类叫作“外部尺寸”，英文写作“Extrinsic Sizing”，宽度由外部元素决定。

width:auto 中，就第一个，也就是

默认宽度 100%显示，是“外部尺寸”，其余 全部是“内部尺寸”。而这唯一的“外部尺寸”，是“流”的精髓所在。

1. 外部尺寸与流体特性

(1)正常流宽度。

当我们在一个容器里倒入足量的水时，水一定会均匀铺满整个容器。

水流自动铺满容器示意

• 在页面中随便扔一个
  元素，其尺寸表现就会和这水流一样铺满容器。这就是 block 容器的流特性。这种特性，所有浏览器的表现都是一致的。
• 表现为“外部尺寸”的块级元素一旦设置了宽度，流动性就丢失了。
• 所谓流动性，并不是看上去的宽度 100%显示这么简单，而是一种 margin/border/padding 和 content 内容区域自动分配水平空间的机制。

HTML

无宽度，借助流动性无宽度，借助流动性 

  导航1
  导航2
  导航3

width:100%

  导航1
  导航2
  导航3

css

.width {
  width: 100%;
}

.nav {
  background-color: #cd0000;
}
.nav-a {
  display: block;
  margin: 0 10px;
  padding: 9px 10px;
  border-bottom: 1px solid #b70000;
  border-top: 1px solid #de3636;
  color: #fff;
}
.nav-a:first-child { border-top: 0; }
.nav-a + .nav-a + .nav-a { border-bottom: 0;}

屏幕快照 2018-07-05 下午4.43.11.png

上下两个导航均有 margin 和 padding，前者无 width 设置，完全借助流特性，后者宽度 width:100%。结果，后者的尺寸超出了外部的容器，完全就不像“水流” 那样完全利用容器空间，即所谓的“流动性丢失”。

(2)格式化宽度。

格式化宽度仅出现在“绝对定位模型”中，也就是出现在 position 属性值为 absolute 或 fixed 的元素中。在默认情况下，绝对定位元素的宽度表现是“包裹性”，宽度由内部尺寸决定，但是，有一种情况其宽度是由外部尺寸决定的，是什么情况呢?
对于非替换元素，当 left/top 或 top/bottom 对立方位的属性值同时存在的时候，元素的宽度表现为“格式化宽度”，其宽度大小相对于最近的具有定位特(position 属性值不是 static)的祖先元素计算。

例如，下面一段 CSS 代码:
div { position: absolute; left: 20px; right: 20px; }
假设该

元素最近的具有定位特性的祖先元素的宽度是 1000 像素，则这个

元素的宽 度是 960(即 1000−20−20)像素。

2. 内部尺寸与流体特性

所谓“内部尺寸”，简单来讲就是元素的尺寸由内部的元素决定，而非由外部的容器决定。如何快速判断一个元素使用的是否 为“内部尺寸”呢? 很简单，假如这个元素里面没有内容，宽度就是 0，那就是应用的“内部尺寸”。

内部尺寸的三种表现形式

(1)包裹性。

“包裹性”，除了“包裹”，还有“自适应性”。“自适应性”是区分后面两种尺寸表现很重要的一点。所谓“自适应性”，指的是元素尺寸由内部元素决定，但永远小于“包含块”容器的 尺寸(除非容器尺寸小于元素的“首选最小宽度”)。换句话说就是，“包裹性”元素冥冥中有个 max-width:100%罩着的感觉(注意，此说法只是便于大家理解，实际上是有明显区别的)。因此，对于一个元素，如果其 display 属性值是 inline-block，那么即使其里面内容再多，只要是正常文本，宽度也不会超过容器。

CSS 世界为何要设计“包裹性”呢？

按钮就是 CSS 世界中极具代表性的 inline-block 元素，可谓展示“包裹性”最好的例 子，具体表现为:按钮文字越多宽度越宽(内部尺寸特性)，但如果文字足够多，则会在容器的 宽度处自动换行(自适应特性)。

“包裹性”对实际开发有什么作用呢?
请看这个需求:页面某个模块的文字内容是动态的，可能是几个字，也可能是一句话。然后，希望文字少的时候居中显示，文字超过一行的时候居左显示。该如何实现?

HTML：

  

      文字多文字多文字多文字多文字多文字多文字多
  

CSS:

.box{
    text-align: center;
    width: 200px;
    background-color: red;
}
.conent{
    display: inline-block;
    text-align: left;
}

文字少的时候

文字为两行的时候

除了 inline-block 元素，浮动元素以及绝对定位元素都具有包裹性， 均有类似的智能宽度行为。

(2)首选最小宽度。

首选最小宽度，指的是元素适合的最小宽度，在上面的例子中，外部容器的宽度是200px，如果宽度是0，那么里面的inline-block的元素的宽度是什么？

是 0 吗?不是。在 CSS 世界中，图片和文字的权重要远大于布局，因此，CSS 的设计者显 然是不会让图文在 width:auto 时宽度变成 0 的，此时所表现的宽度就是“首选最小宽度”。

首选最小宽度，具体表现规则如下：

1. 东亚文字(如中文)最小宽度为每个汉字的宽度。

外层容器的宽度为 0

有符号的情况

2. 西方文字最小宽度由特定的连续的英文字符单元决定。并不是所有的英文字符都会组成连续单元， 一般会终止于空格(普通空格)、短横线、问号以及其他非英文字符等。

image.png

如果想让英文字符和中文一样，每一个字符都用最小宽度 单元，可以试试使用 CSS 中的 word-break:break-all。

3. 类似图片这样的替换元素的最小宽度就是该元素内容本身的宽度。

首选最小宽度”对我们实际开发有什么作用呢?

可以让我们遇到类似现象的时候知道原因是什么，方便迅速对症下药，其他就没什么用了。

有点失望? 那好，我就举个利用“首选最小宽度”构建图形的例子吧。请问，如何使用一 层 HTML 标签分别实现下图所示的“凹”和“凸”效果(注意要兼容 IE8)?

image.png

由于要兼容 IE8，CSS 新世界中图形构建利器的盒阴影和背景渐变全都没有用武之地，怎么办呢?我们可以利用“首选最小宽度”的行为特点把需要的图形勾勒出来。

HTML：

CSS :

.ao,
.tu {
  display: inline-block;
  width: 0;
  font-size: 14px;
  line-height: 18px;
  margin: 35px;
  color: #fff;
}
.ao:before,
.tu:before {
  outline: 2px solid #cd0000;
  font-family: Consolas, Monaco, monospace;
}
.ao:before {
  content: "love你love";
}
.tu {
  direction: rtl;
}
.tu:before {
  content: "我love你";
}