塊級元素(塊級元素一般當做容器使用翅楼,既可以容納內聯(lián)元素也可以容納塊級元素)
特點:
1.每個塊級元素都是獨自占一行理澎,其后的元素也只能另起一行酥宴,并不能兩個元素共用一行弯淘。
2.元素的高度榆综、寬度妙痹、行高和頂?shù)走吘喽际强梢栽O置的。
3.元素的寬度如果不設置的話鼻疮,默認為父元素的寬度怯伊。
4.塊級元素對應屬性display:block;
常見的塊級元素:
(1)div:主要用來進行框架布局判沟。
(2)h1~h6:用來設置不同級別的標題耿芹。
(3)p:創(chuàng)建段落崭篡,會自動在其前后創(chuàng)建一些空白。
(4)hr:用來創(chuàng)建分隔先猩系。
(5)ol:創(chuàng)建有序列表媚送。
(6)ul:創(chuàng)建無序列表。
行內元素(任何不是塊級元素的可見元素都是行內元素寇甸。行內元素只能夠容納文本或者行內元素塘偎。)
特點:
1.可以和其他元素處于一行,不用必須另起一行拿霉。
2.元素的高度吟秩、寬度及頂部和底部邊距不可設置。
3.元素的寬度就是它包含的文字绽淘、圖片的寬度涵防,不可改變。
4.行內元素對應屬性display:inline沪铭;
常見的內聯(lián)元素:
(1)strong:加粗強調壮池。
(2)em:斜體強調。
(3)s:刪除線杀怠。
(4)u:下劃線椰憋。
(5)a:超鏈接。
(6)span:常用行級赔退,可定義文檔中的行內元素橙依。
(7)img:圖片。
(8)input:表單硕旗。
行級元素與塊級元素的轉換
如果想將塊級元素與行級元素相互轉換窗骑,該怎么辦呢?
可以在css樣式中用display:inline將塊級元素設為行級元素
同樣漆枚,也可以用display:block將行級元素設為塊級元素
行級-塊級元素
如果又想設置高度创译、寬度、行高以及頂和底邊距墙基,又想元素處于一行昔榴,該怎么辦呢?
此時就可以用display:inline-block將元素設置為行級-塊級元素碘橘。
塊級元素和行內元素的分類
html中的塊級元素:
html中的行內元素: