對于以前比較模糊的幾個概念:替換元素访惜、非替換元素嘹履、行內元素框模型,做了如下總結
替換元素:
以前對替換元素沒有概念债热,今天查了下資料:替換元素是瀏覽器根據其標簽的元素與屬性來判斷顯示具體的內容砾嫉。
img、input窒篱、textarea焕刮、select舶沿、object 等都是替換元素,
這些元素都沒有實際的內容配并。
替換元素可以增加行框高度括荡,但不增加line-height,內容區(qū)高度值 = padding-top + padding-bottom + margin-top + margin-bottom + height荐绝。
要想替換元素居中一汽,可以設置line-height = height, vertral-align = middle低滩。
非替換元素:
大多數(shù)元素是不可替換元素召夹,他們將內容直接告訴瀏覽器,將其顯示出來恕沫。
比如 p的內容监憎、label的內容;瀏覽器將把這段內容直接顯示出來婶溯。
非替換元素添加padding-top或padding-bottom鲸阔,不影響行框高度,但內容區(qū)高度會變化迄委,margin-top褐筛,margin-bottom對行框沒有任何影響。
添加左右邊距會影響非替換元素水平位置叙身。要使非替換元素在父元素框內居中渔扎,可以設定line-height = 父元素框的高度。
行內元素里的一些東西:
行內布局是一個很大的坑信轿,今天總結了一下行內元素框模型晃痴,有下面幾個方面:
- 匿名文本:未被包含在行內元素的字符串
em框:em框在字體中定義,也被稱為字符框
內容區(qū):內容區(qū)可以是元素中各個字符的em框串在一起構成的框财忽,也可以由元素中字符字形描述的框倘核。
行間距:font-size與line-height之差/2 就是行間距
行內框:通過向內容區(qū)增加行間距來描述,對于非替換元素行內框剛好等于line-height
行框:這是包含該行中出現(xiàn)的行內框的最高點和最低點的最小框即彪,意思是行框上邊界要高于最高行內框紧唱,最低也要大于最低的行內框