《CSS世界》是由张鑫旭所写的一本关于CSS合理使用和奇妙技巧的书，对于CSS的进阶很有帮助。目前只读了前4章，本文记录一下读书心得:
（1）盒模型和元素的分类
（2）深藏不落的width:auto
（3）外部尺寸与流体特性
（4）内部尺寸与流体特性
（5）为流体而生的min-width/max-height
（6）替换元素
（7）替换元素与非替换元素的距离

（1）盒模型和元素的分类

image.png

a. 块级元素（block）：1.独占一行。 2.大多数具有流动性。 3.大多数可以手动设置width/height。
b. 内联元素（inline）：1.不独占一行。2.大多数具有内聚性。3.大多数不能手动设置width/height。
c. 内联块级元素(inline-block): 不独占一行，大多数内聚，大多数可手动设置width/height。

（2）深藏不落的width:auto
a.充分利用可用空间。常见于块级元素，<div> <p> 这些元素默认为充满父元素。（尺寸由外部决定）
b.收缩与包裹。浮动，绝对定位，inline-block元素或table元素。（尺寸由内部决定）
c.收缩到最小。
https://demo.cssworld.cn/3/2-1.php

（3）外部尺寸与流体特性
a.正常流宽度

image.png
流动性并非是宽度100%于父容器，而是一种margin/border/padding和content自动分配水平空间的机制。
http://demo.cssworld.cn/3/2-3.php

b.格式化宽度。
出现在绝对定位中。默认情况下，绝对定位的元素的宽度表现为“包裹性”，但有一种情况下宽度是由外部尺寸决定：
div { position: absolute; left: 20px; right: 20px; }
假如该元素的具有定位特性的祖先元素宽度是1000，则该元素宽度为960。格式化宽度也具有流体特性。

（4）内部尺寸与流体特性
a.元素尺寸由内部元素决定，但永远小于“包含块”容器的尺寸（除非容器尺寸小于元素的“首选最小宽度”）
http://demo.cssworld.cn/3/2-5.php

b. 改变width/height作用细节的box-sizing
width/height 默认是作用在content-box上

image.png
image.png

{ box-sizing: border - box }
对于普通内联元素（非图片等替换元素），box-sizing无论是什么值，对其渲染表现都没有影响。
有些元素，如search类型的搜索框，其默认的box-sizing就是border-box（如果浏览器支持）。

box - sizing 发明的初衷
唯一离不开 box - sizing 就是原生普通文本框<input>和文本域 <textarea> 的 100%自适应父容器宽度
替换元素，width:auto的情况下，尺寸由内部元素决定，无论其display的值是inline还是block。
所以只能通过设置 width: 100%。
在浏览器还没有支持 box - sizing 的年代，是这样写的：
http://demo.cssworld.cn/3/2-9.php

上述写法也有局限性，比如无法使用：focus高亮父级的边框
box - sizing 被发明出来最大的初衷应该是解决替换元素的宽度自适应问题，这样写也许更合理
input, textarea, img, video, object {
　 box-sizing: border-box;
}

（5）为流体而生的min-width/max-width
.container {
　 min-width: 1200px;
　 max-width: 1400px;
}

img {
　 max-width: 100%;
　 height: auto!important;
}

超越 !important
<img src="1.jpg" style="width:480px!important;">
img { max-width: 256px; }
超越最大
.container {
　 min-width: 1400px;
　 max-width: 1200px;
　 }

任意高度的展开收起动画：
.element {
　 height: 0;
　 overflow: hidden;
　 transition: height .25s;
}
.element.active {
　 height: auto;　　/* 没有 transition 效果，只是生硬地展开 */
}

.element {
　 max-height: 0;
　 overflow: hidden;
　 transition: max-height .25s;
}
.element.active {
　 max-height: 666px;　　/* 一个足够大的最大高度值 */
}

（6）替换元素
替换元素可以说是CSS世界中的另外一个派系。
根据元素是否独占一行把元素分为内联元素和块级元素。
更具元素是否具有可替换内容，可以 把元素分为替换元素和非替换元素。
<img src=“1.jpg”>
这种通过修改某个属性值呈现的内容就可以被替换的元素就称为“替换元素”。因此，<img>、<object>、<video>、<iframe>或者表单元素<textarea>和<input>都是典型的替换元素。

替换元素的尺寸计算规则：固有尺寸，HTML尺寸，CSS尺寸

固有尺寸就是替换内容原本的尺寸。

HTML尺寸

<img width="300" height="100">
<input type="file" size="30">
<textarea cols="20" rows=“5></textarea>

image.png

img { width: 200px; }
　　<img src="1.jpg">

三种尺寸都没有的情况下，会有默认的固定尺寸， 300 X 150。
这条规则<video>,<canvas>,<iframe>都符合，<img>却例外。
并且各个浏览器给<img>的默认固定尺寸不同。

image.png
image.png
image.png
CSS世界中的替换元素的固有尺寸有一个很重要的特性，那就是“我们是无法改变这个替换元素内容的固有尺寸的”。

div:before {

content: url(1.jpg);

display: block;

width: 200px; height: 200px;

}

http://demo.cssworld.cn/4/1-1.php

为什么图片的固有尺寸不受CSS宽高控制，那为何设定width/height还是会影响到图片的尺寸？
object-fit: fill none contain cover

（7）替换元素与非替换元素的距离
a.观点1：替换元素和非替换元素之间只隔一个src属性
平时使用<img>总是会设置src属性，如果把src属性去掉会如何？
img {
　 display: block;
　 outline: 1px solid;
}
<img>
按照替换元素的尺寸规则，宽度应该是0，但实际上，在 Firefox 浏览器下，最终的宽度是100%自适应父容器的可用宽度的。其表现和普通的<span>类似，已经完全不是替换元素了。
Chrome 浏览器其实也有类似的表现，只是需要特定的条件触发而已，这个触发条件就是alt需要有不为空的属性值。例如：
<img alt=“任意值">
IE浏览器下，<img>会给默认的图片，所以仍然表现为替换元素

b.观点2：替换元素和非替换元素之间只隔了一个CSS content属性
替换元素之所以为替换元素，就是因为其内容可替换，利用content属性为元素设置内容（Chrome下，所有元素都支持conetnt属性)
前面已经证明了，没有src属性的<img>是非替换元素，但是，如果我们此时使用content属性给它生成一张图片呢?
http://demo.cssworld.cn/4/1-3.php

如果图片原来是有src地址的，我们也是可以使用content属性把图片内容给置换掉的
http://demo.cssworld.cn/4/1-4.php
这种情况下，图片无法右键保存

使用content属性，也可以让普通标签元素变成替换元素。
官网标志
<h1>《CSS 世界》</h1>
h1 {

width: 180px;

height: 36px;

background: url(logo.png);

/* 隐藏文字 */

text-indent: -999px;

}

h1 {
　　 content: url(logo.png);
}

文字被替换，但搜索引擎能抓到
http://demo.cssworld.cn/4/1-5.php