塊級、行內(nèi)級元素
- 根據(jù)元素的顯示類型猴仑，HTML元素可以主要分為2大類
塊級元素（block-level elements）
獨占父元素一行
比如div审轮、p、pre辽俗、h1~h6疾渣、ul、ol榆苞、li、dl霞捡、dt坐漏、dd、table碧信、form赊琳、article、aside砰碴、footer躏筏、header、hgroup呈枉、main趁尼、nav、section猖辫、blockquote酥泞、hr等
行內(nèi)級元素（inline-level elements）
多個行內(nèi)級元素可以在父元素的同一行中顯示
比如a、img啃憎、span芝囤、strong、code、iframe悯姊、label羡藐、input、button悯许、canvas仆嗦、embed、object岸晦、 video欧啤、audio等
替換、非替換元素
- 根據(jù)元素的內(nèi)容類型启上，HTML元素可以主要分為2大類
替換元素（replaced elements）
元素本身沒有實際內(nèi)容邢隧，瀏覽器根據(jù)元素的類型和屬性，來決定元素的具體顯示內(nèi)容
比如img冈在、input倒慧、iframe、video包券、embed纫谅、canvas、audio溅固、object等
非替換元素（non-replaced elements）
和替換元素相反付秕，元素本身是有實際內(nèi)容的，瀏覽器會直接將其內(nèi)容顯示出來侍郭，而不需要根據(jù)元素類型和屬性來判斷到底顯示什么內(nèi)容
比如div询吴、p、pre亮元、h1~h6猛计、ul、ol爆捞、li奉瘤、dl、dt煮甥、dd盗温、table、form成肘、article肌访、aside、footer艇劫、header吼驶、hgroup惩激、main、nav蟹演、section风钻、blockquote、hr酒请、a骡技、strong、span羞反、code布朦、label等
元素的分類總結(jié)
CSS屬性 - display
- CSS中有個display屬性，能修改元素的顯示類型昼窗，有4個常用值
block：讓元素顯示為塊級元素
inline：讓元素顯示為行內(nèi)級元素
none：隱藏元素
inline-block：讓元素同時具備行內(nèi)級是趴、塊級元素的特征
inline-block
可以讓元素同時具備塊級、行內(nèi)級元素的特征
跟其他行內(nèi)級元素在同一行顯示
可以隨意設(shè)置寬高
寬高默認(rèn)由內(nèi)容決定
可以理解為
對外來說澄惊，它是一個行內(nèi)級元素
對內(nèi)來說唆途，它是一個塊級元素
常見用途
讓行內(nèi)級非替換元素（比如a、span等）能夠隨時設(shè)置寬高
讓塊級元素（比如div掸驱、p等）能夠跟其他元素在同一行顯示
CSS屬性 - visibility
visibility肛搬，能控制元素的可見性，有2個常用值
visible：顯示元素
hidden：隱藏元素
visibility: hidden; 和 display: none; 的區(qū)別
visibility: hidden;
雖然元素看不見了毕贼，但元素的框依舊還留著温赔，還會占著原來的位置
display: none;
不僅元素看不見了，而且元素的框也會被移除鬼癣，不會占著任何位置
CSS屬性 - overflow
-
overflow用于控制內(nèi)容溢出時的行為
- visible：溢出的內(nèi)容照樣可見
- hidden：溢出的內(nèi)容直接裁剪
- scroll：溢出的內(nèi)容被裁剪陶贼，但可以通過滾動機制查看
會一直顯示滾動條區(qū)域，滾動條區(qū)域占用的空間屬于width扣溺、height - auto：自動根據(jù)內(nèi)容是否溢出來決定是否提供滾動機制
overflow用于控制內(nèi)容溢出時的行為
visible：溢出的內(nèi)容照樣可見
hidden：溢出的內(nèi)容直接裁剪
scroll：溢出的內(nèi)容被裁剪骇窍，但可以通過滾動機制查看
會一直顯示滾動條區(qū)域瓜晤，滾動條區(qū)域占用的空間屬于width锥余、height
auto：自動根據(jù)內(nèi)容是否溢出來決定是否提供滾動機制
塊級元素、inline-block元素
一般情況下痢掠，可以包含其他任何元素（比如塊級元素驱犹、行內(nèi)級元素、inline-block元素）
特殊情況足画，p元素不能包含其他塊級元素
行內(nèi)級元素（比如a雄驹、span、strong等）
一般情況下淹辞，只能包含行內(nèi)級元素
