《CSS世界》是由張鑫旭所寫的一本關于CSS合理使用和奇妙技巧的書，對于CSS的進階很有幫助耳贬。目前只讀了前4章肮疗，本文記錄一下讀書心得:
（1）盒模型和元素的分類
（2）深藏不落的width:auto
（3）外部尺寸與流體特性
（4）內部尺寸與流體特性
（5）為流體而生的min-width/max-height
（6）替換元素
（7）替換元素與非替換元素的距離
（1）盒模型和元素的分類
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.正常流寬度
流動性并非是寬度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作用細節(jié)的box-sizing
width/height 默認是作用在content-box上
{ box-sizing: border - box }
對于普通內聯元素（非圖片等替換元素），box-sizing無論是什么值，對其渲染表現都沒有影響称鳞。
有些元素涮较，如search類型的搜索框，其默認的box-sizing就是border-box（如果瀏覽器支持）冈止。
box - sizing 發(fā)明的初衷
唯一離不開 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 被發(fā)明出來最大的初衷應該是解決替換元素的寬度自適應問題，這樣寫也許更合理
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>都是典型的替換元素肪康。
替換元素的尺寸計算規(guī)則：固有尺寸，HTML尺寸撩穿，CSS尺寸
固有尺寸就是替換內容原本的尺寸磷支。
HTML尺寸
<img width="300" height="100">
<input type="file" size="30">
<textarea cols="20" rows=“5></textarea>
img { width: 200px; }
<img src="1.jpg">
三種尺寸都沒有的情況下，會有默認的固定尺寸食寡， 300 X 150雾狈。
這條規(guī)則<video>,<canvas>,<iframe>都符合，<img>卻例外抵皱。
并且各個瀏覽器給<img>的默認固定尺寸不同善榛。
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>
按照替換元素的尺寸規(guī)則，寬度應該是0，但實際上叙甸，在 Firefox 瀏覽器下颖医，最終的寬度是100%自適應父容器的可用寬度的。其表現和普通的<span>類似裆蒸，已經完全不是替換元素了熔萧。
Chrome 瀏覽器其實也有類似的表現，只是需要特定的條件觸發(fā)而已僚祷，這個觸發(fā)條件就是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
