塊級元素(block elements)與行內(nèi)元素(inline elements)是構(gòu)建html世界的基本元素野蝇,所有位于body標簽的元素可以劃分為這兩大類型敞掘。那么,我們不禁要問:元素劃分為block和inline的意義何在?
- 塊級元素
- 塊級元素規(guī)定
元素內(nèi)容占據(jù)整塊區(qū)域
,排斥其他元素與其位于同一行 - 可以設(shè)定width和height
- 一般是其他元素(block或inline)的父容器
- 具體演示效果如下:
- 塊級元素規(guī)定
- 常見塊級元素包括:
-
行內(nèi)元素
- 行內(nèi)元素規(guī)定可以與其他元素位于同一行玉组,但不可包含塊級元素
- 不可以設(shè)定width和height,height由字體大小決定丁侄,weight有字體個數(shù)決定
具體演示效果如下:
- 常見行內(nèi)元素包括:
- 可變元素
- Css元素的display屬性
每一個元素都具備一個display屬性,該屬性規(guī)定每個元素的表現(xiàn)類型:block朝巫、inline和block-inline
- block規(guī)定元素為塊級元素鸿摇;inline規(guī)定元素為行內(nèi)元素;inline-block規(guī)定元素具有改變寬高功能的行內(nèi)元素
- 具體演示效果如下:
小結(jié):
- block規(guī)定元素的占據(jù)整塊區(qū)域的空間劈猿,排斥其他元素與其同行拙吉;inline規(guī)定元素可與其他元素同行;inline-block是具備調(diào)整寬高的inline元素
- block可以設(shè)定寬高并能容納其他block和inline元素,inline無法設(shè)定寬高并只能容納inline元素
- 可以在Css元素中設(shè)定display屬性改變元素的表現(xiàn)形式
參考資料: