區塊(block)元素特點
1.區塊(block)元素都會另起一行。
2.hiehgt、line-height、margin、padding 的高度與寬度都可以設置。
3.默認情况下,區塊元素的寬度會自動填满其父元素寬度延申,寬度100%的情況下會自適應延申佔滿整個區塊。
4.可以設置寬高 width hight
5.區塊元素常見包括
div、p、h1~h6、ul、ol、li、form、table。
<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>等等
6.<div>:用在排版的區塊標籤,本身不代表任何意思
行內(inline)元素特點
1.和其他元素都在同一行上,相鄰的行内元素会並排在同一行,
直到一整行排不下才會換行,其寬度隨元素的内容而變化。
2.設置寬度與高度無效,只能由内容撑起来,即行内元素設置width,height屬性無效。
3.無法設罝margin、padding的上下,只能設置padding 、margin左右,此時才會有效果出來。
4.水平方向的padding-left 、padding-right、margin-left、margin-right都會產生效果,但上下方向的padding-top、padding-bottom、margin-top 、margin-bottom不會產生邊距效果。
5.行內元素常見包括
a、span、img、input、br...等
6.若想對行內元素設置寬、高度,可以寫成 display: block 就可以設罝margin、padding的高度,例如如把 <a> 連結更改成區塊元素後,只要在點擊連結時都可以在區塊內部都可以點擊得到。
inline-block 的特點
1、會依照元素的內容決定內容的寬高,不會佔滿橫向的剩餘空間
2、可設置元素的寬高, width , height , max-width, max-height 與 line-height,也可以設罝 padding-top , padding-bottom。
3 同時俱有 block 與 inline 的特性。