《CSS世界》读书笔记（三） --width:auto

<!-- 《CSS世界》 张鑫旭著  -->

width:auto

width:auto至少包含了以下4种不同的宽度表现：

• 充分可利用空间。比方说，<div>、<p>这些元素的宽度默认是100%于父级容器的。
• 收缩与包裹。典型代表是浮动、绝对定位、inline-block元素或table元素，英文成为shrink-to-fit，直译为“收缩到合适”，更形象的叫法是“包裹性”
• 收缩到最小。这个最容易出现在table-layout为auto的表格中
• 超出容器限制。除非有明确的width相关设置，否则上面三种情况尺寸都不会出动超出父级容器宽度的，但存在一些特殊情况。例如：内容很长的连续的英文和数字，或者内联元素被设置了white-space:nowrap。

尺寸分“内部尺寸”和“外部尺寸”。其中“内部尺寸”表示尺寸由内部元素决定，“外部尺寸”表示宽度由外部元素决定。上面4种尺寸表现，就地一个是“外部尺寸”。

1.外部尺寸与流体特性

（1）正常流宽度

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

在页面中随便扔一个<div>元素，其尺寸表现就会和水流一样铺满容器。这就是block容器的流特性。

表现为“外部尺寸”的块级元素一旦设置了宽度，流动性就丢失了。

所谓流动性，并不是看上去的宽度100%显示这么简单，而是一种margin/border/padding和content内容区域自动分配水平空间的机制

示例见 http://demo.cssworld.cn/3/2-3.php

（2）格式化宽度

格式化宽度仅出现在“绝对定位模型”中，也就是出现在position属性值为absolute或fixed的元素中。

在默认情况下，绝对定位元素的宽度表现为“包裹性”，宽度由内部尺寸决定，但是有一种情况其宽度是由外部尺寸决定的：

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

和上面的普通流一样，“格式化宽度”具有完全的流动性，也就是margin/border/padding和content内容区域自动分配水平（和垂直）空间

 2.内部尺寸与流体特性

（1）包裹性

“包裹性”除了“包裹”，还有“自适应性”。

所谓“自适应性”，指的是元素尺寸由内部元素决定，但永远小于“包含块”容器的尺寸（除非容器尺寸小于元素的“首选最小宽度”）。

根据这个特性，我们可以实现，例如：文字少的时候居中显示，文字超过一行的时候居左显示。核心CSS代码如下：

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

具体可点击查看：http://demo.cssworld.cn/3/2-5.php

inline-block元素、浮动元素以及绝对定位元素、table元素都具有包裹性。

（2）首选最小宽度

所谓“首选最小宽度”，指的是元素最适合的最小宽度。

假如外部容器的宽度是0，里面width:auto的inline-block元素的宽度不会是0，此时所表现的宽度就是“首选最小宽度”。具体表现规则如下：

• 东亚文字（如中文）最小宽度为每个汉字的宽度
• 西方文字最小宽度由特定的连续的英文字符单元决定。并不是所有的英文字符都会组成连续单元，一般会终止于空格（普通空格）、短横线、问号以及其他非英文字符等。
• 类似图片这样的替换元素的最小宽度就是该元素内容本身的宽度。

具体可查看：http://demo.cssworld.cn/3/2-6.php

（3）最大宽度

“最大宽度”实际等同于“包裹性”元素设置white-space:nowrap声明后的宽度。

如果内部没有块级元素或者块级元素没有设定宽度值，则“最大宽度”实际上是最大的连续内联盒子的宽度。

“连续内联盒子”是指全部都是内联级别的一个或一堆元素，中间没有任何的换行标签<br>或其他块级元素。

具体应用可查看：http://demo.cssworld.cn/3/2-7.php

 

width是作用在“内在盒子”上的，这个“内在盒子”是由很多部分构成的，由内至外是：content、padding、border、margin。