根據是否具有可替換內容，我們可以把元素分為替換元素和非替換元素。
、、、或表單元素和都是典型的替換元素。
（1）內容的外觀不受頁面上的css的影響。用專業的話講就是樣式表現在css作用域之外。例如：直接 input[type='checkbox'] {} 無法更改內間距、背景色等樣式，需要用瀏覽器自身暴露的一些樣式介面，例如::-ms-check {} 可以更改高版本ie瀏覽器下單核取方塊的內間距、背景色等樣式
（2）有自己的尺寸。在web中，很多替換元素在沒有明確尺寸設定的情況下，其預設的尺寸（不包括邊框）是300畫素 × 150畫素，如、或者等，也有少部分替換元素為0畫素，如
，而表單元素的替換元素尺寸則和瀏覽器有關，沒有明顯的規律。
（3）在很多css屬性上都有自己的一套表現規則。比較有代表性的是vertical-align屬性，對於替換元素和非替換元素，vertical-align屬性值的解釋是不一樣的。比方說vertical-align的預設值的baseline，很簡單的屬性值，基線之意，被定義為字元x的下邊緣，在西方語言體系裡近乎常識，幾乎無人不知，但是到了替換元素那裡就不適用了。為什麼呢？因為替換元素的內容往往不可能含有字元x，於是替換元素的基線就被硬生生定義成了元素的下邊緣。
替換元素都是內聯水平元素，但是替換元素的display值卻是不一樣的，並且在不同瀏覽器的值也是不一樣的，但是這並不會影響替換元素的尺寸計算規則，所以深究替換元素的display值是沒有意義的。
<和按鈕的區別在於兩種按鈕預設的 white-space 值不一樣，前者是 pre，後者是 normal，所表示出來的差異就是：當按鈕文字足夠多的時候，按鈕不會自動換行，按鈕會自動換行。input
type
="button"
value
="按鈕"
>
<
button
type
="button"
>按鈕
button
>
作者將替換元素的尺寸從內而外分為3類：固有尺寸、html尺寸和css尺寸。
（2）html 尺寸只能通過 html 原生屬性改變，包括
的width和height屬性、的size屬性，的cols和rows屬性等。
（3）css 尺寸特指可以通過 css 的width和height或者max-width/min-width和max-height/min-height設定的尺寸，對應盒尺寸中的content box。
這3層結構的計算規則如下：
web開發的時候，為了提高載入效能以及節約頻寬費用，首屏一下的就會通過滾屏載入的方式非同步載入，然後這個即將非同步載入的為了布局穩健、體驗良好，往往會使用一張透明的佔位，例如：
img img[src]這裡的
直接沒有src屬性，因為src=""在很多瀏覽器下依然會有請求，而且請求的是當前頁面資料。但的src屬性預設的時候，不會有任何請求，是最高效的實現方式。
但是這裡存在乙個問題，firefox瀏覽器下，src預設的
不是替換元素，而是乙個普通的內聯元素，所以使用的不是替換元素的尺寸規則，而是類似的內聯元素尺寸規則，寬高會無效。這時就要設定display: inline-block後再設定寬高了，既對firefox瀏覽器有效，又不會影響其他瀏覽器的表現。
html 尺寸和 css 尺寸是怎麼影響的尺寸的呢？
尺寸變化的本質不是改變固有尺寸，而是採用了填充作為適配 html 尺寸和 css 尺寸的方式。在 css3 新世界中，
和其他一些替換元素的替換內容的適配方式可以通過object-fit屬性（ie全部不相容）修改，例如：
預設宣告是：object-fit: fill，如果我們設定object-fit: none，則我們的尺寸就完全不受控制(據筆者測試，是保持比例不變，不縮放，但是尺寸是受css屬性width和height限制的)；如果我們設定object-fit: contain，則會以保持比例，並盡可能利用 html 尺寸但又不會超出的方式顯示。
《CSS世界》讀書筆記
css三無準則 無寬度 充分利用流特性 無浮動 無 無寬度與寬度分離分離準則相通 瀏覽器相容 區別 ie8僅支援單冒號的偽元素 如 element before 常用清楚浮動方式 清楚浮動 clearfix.clearfix after 需求 頁面某模組的文字內容是動態的，希望文字少的時候居中顯示，...
《css世界》的讀書筆記
1.等元素在使用鍵盤進行tab鍵切換時可以被選中，即獲取到焦點，表現為虛框或者外發光，這類元素為焦點元素 非焦點元素 等沒有設定tabindex屬性，即無法被tab鍵獲取。在ie6 7瀏覽器下，非焦點元素對 active置若罔聞。這裡涉及到ie6，7的相容性 2.ie瀏覽器不支援 偽元素的 disp...
css世界讀書筆記 line height（0）
預設空div高度是0，但是一旦寫上幾個文字，高度就有了，這個高度由何而來？表面上看，是有font size決定的，但是本質上，是由line height全權決定的，與font size大小無關。注意這裡面的完全，即padding，border屬性對於可視高度無任何影響 對於文字這樣的純內聯元素，li...