《CSS世界》是由張鑫旭所寫的一本關(guān)于CSS合理使用和奇妙技巧的書，對于CSS的進(jìn)階很有幫助。目前只讀了前4章，本文記錄一下讀書心得:
（1）盒模型和元素的分類
（2）深藏不落的width:auto
（3）外部尺寸與流體特性
（4）內(nèi)部尺寸與流體特性
（5）為流體而生的min-width/max-height
（6）替換元素
（7）替換元素與非替換元素的距離

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

image.png

a. 塊級元素（block）：1.獨(dú)占一行。 2.大多數(shù)具有流動(dòng)性。 3.大多數(shù)可以手動(dòng)設(shè)置width/height。
b. 內(nèi)聯(lián)元素（inline）：1.不獨(dú)占一行。2.大多數(shù)具有內(nèi)聚性。3.大多數(shù)不能手動(dòng)設(shè)置width/height。
c. 內(nèi)聯(lián)塊級元素(inline-block): 不獨(dú)占一行，大多數(shù)內(nèi)聚，大多數(shù)可手動(dòng)設(shè)置width/height。

（2）深藏不落的width:auto
a.充分利用可用空間。常見于塊級元素，<div> <p> 這些元素默認(rèn)為充滿父元素。（尺寸由外部決定）
b.收縮與包裹。浮動(dòng)，絕對定位，inline-block元素或table元素。（尺寸由內(nèi)部決定）
c.收縮到最小。
https://demo.cssworld.cn/3/2-1.php

（3）外部尺寸與流體特性
a.正常流寬度

image.png

b.格式化寬度。
出現(xiàn)在絕對定位中。默認(rèn)情況下，絕對定位的元素的寬度表現(xiàn)為“包裹性”，但有一種情況下寬度是由外部尺寸決定：
div { position: absolute; left: 20px; right: 20px; }
假如該元素的具有定位特性的祖先元素寬度是1000，則該元素寬度為960。格式化寬度也具有流體特性。

（4）內(nèi)部尺寸與流體特性
a.元素尺寸由內(nèi)部元素決定，但永遠(yuǎn)小于“包含塊”容器的尺寸（除非容器尺寸小于元素的“首選最小寬度”）
http://demo.cssworld.cn/3/2-5.php

b. 改變width/height作用細(xì)節(jié)的box-sizing
width/height 默認(rèn)是作用在content-box上

image.png

image.png

{ box-sizing: border - box }
對于普通內(nèi)聯(lián)元素（非圖片等替換元素），box-sizing無論是什么值，對其渲染表現(xiàn)都沒有影響。
有些元素，如search類型的搜索框，其默認(rèn)的box-sizing就是border-box（如果瀏覽器支持）。

box - sizing 發(fā)明的初衷
唯一離不開 box - sizing 就是原生普通文本框<input>和文本域 <textarea> 的 100%自適應(yīng)父容器寬度
替換元素，width:auto的情況下，尺寸由內(nèi)部元素決定，無論其display的值是inline還是block。
所以只能通過設(shè)置 width: 100%。
在瀏覽器還沒有支持 box - sizing 的年代，是這樣寫的：
http://demo.cssworld.cn/3/2-9.php

上述寫法也有局限性，比如無法使用：focus高亮父級的邊框
box - sizing 被發(fā)明出來最大的初衷應(yīng)該是解決替換元素的寬度自適應(yīng)問題，這樣寫也許更合理
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;
　 }

任意高度的展開收起動(dòng)畫：
.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;　　/* 一個(gè)足夠大的最大高度值 */
}

（6）替換元素
替換元素可以說是CSS世界中的另外一個(gè)派系。
根據(jù)元素是否獨(dú)占一行把元素分為內(nèi)聯(lián)元素和塊級元素。
更具元素是否具有可替換內(nèi)容，可以 把元素分為替換元素和非替換元素。
<img src=“1.jpg”>
這種通過修改某個(gè)屬性值呈現(xiàn)的內(nèi)容就可以被替換的元素就稱為“替換元素”。因此，<img>、<object>、<video>、<iframe>或者表單元素<textarea>和<input>都是典型的替換元素。

替換元素的尺寸計(jì)算規(guī)則：固有尺寸，HTML尺寸，CSS尺寸

固有尺寸就是替換內(nèi)容原本的尺寸。

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">

三種尺寸都沒有的情況下，會(huì)有默認(rèn)的固定尺寸， 300 X 150。
這條規(guī)則<video>,<canvas>,<iframe>都符合，<img>卻例外。
并且各個(gè)瀏覽器給<img>的默認(rèn)固定尺寸不同。

image.png

image.png

image.png

div:before {

content: url(1.jpg);

display: block;

width: 200px; height: 200px;

}

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

為什么圖片的固有尺寸不受CSS寬高控制，那為何設(shè)定width/height還是會(huì)影響到圖片的尺寸？
object-fit: fill none contain cover

（7）替換元素與非替換元素的距離
a.觀點(diǎn)1：替換元素和非替換元素之間只隔一個(gè)src屬性
平時(shí)使用<img>總是會(huì)設(shè)置src屬性，如果把src屬性去掉會(huì)如何？
img {
　 display: block;
　 outline: 1px solid;
}
<img>
按照替換元素的尺寸規(guī)則，寬度應(yīng)該是0，但實(shí)際上，在 Firefox 瀏覽器下，最終的寬度是100%自適應(yīng)父容器的可用寬度的。其表現(xiàn)和普通的<span>類似，已經(jīng)完全不是替換元素了。
Chrome 瀏覽器其實(shí)也有類似的表現(xiàn)，只是需要特定的條件觸發(fā)而已，這個(gè)觸發(fā)條件就是alt需要有不為空的屬性值。例如：
<img alt=“任意值">
IE瀏覽器下，<img>會(huì)給默認(rèn)的圖片，所以仍然表現(xiàn)為替換元素

b.觀點(diǎn)2：替換元素和非替換元素之間只隔了一個(gè)CSS content屬性
替換元素之所以為替換元素，就是因?yàn)槠鋬?nèi)容可替換，利用content屬性為元素設(shè)置內(nèi)容（Chrome下，所有元素都支持conetnt屬性)
前面已經(jīng)證明了，沒有src屬性的<img>是非替換元素，但是，如果我們此時(shí)使用content屬性給它生成一張圖片呢?
http://demo.cssworld.cn/4/1-3.php

如果圖片原來是有src地址的，我們也是可以使用content屬性把圖片內(nèi)容給置換掉的
http://demo.cssworld.cn/4/1-4.php
這種情況下，圖片無法右鍵保存

使用content屬性，也可以讓普通標(biāo)簽元素變成替換元素。
官網(wǎng)標(biāo)志
<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