block,inline,inline-block的區別

block

1,表現爲塊級元素。
2,元素最後自動換行。
3,一些默認塊級元素:div,ul,ol,dl,img,p….
4,塊級元素裏面可以放內聯元素.但是應該據事實來看,不一樣的標籤內嵌的不一樣。比如P標籤,內嵌的只能是內聯元素
5,默認填滿父元素
6,可以設置width,height,margin,padding

inline

1,表現爲行級元素(內聯元素)。
2,元素最後不換行。
3,一些默認行級元素:span,a,input,button….
4,內聯元素裏面不能放塊級元素
5,直到內容打到邊緣才換行。不一定會填滿父元素
6,width,height屬性失效。水平方向的Margin,padding可以,豎直方向不行。但也應該由情況而定,例如input標籤就可以設置height等。可以設置行高line-height.

inline-block

1,外部表現爲內聯元素,內部表現爲塊級元素。
2,該元素本身最後不換行,內部元素換行。
3,無默認元素。
4,可以放任意元素,一般是塊級元素
5,外部不換行,但會填滿父級節點。當設置爲浮動時,父級依然會被撐開。
6,外部表現爲內聯,則不會換行。內部表現爲塊級元素,則設置width,height,margin,padding會生效
當有浮動元素時,不需要清除浮動。
7,低版本IE不支持inline-block,在IE中對內聯元素使用display:inline-block,理論上IE是不識別的,但使用display:inline-block在IE下會觸發layout,從而使內聯元素擁有了display:inline-block屬性的表象。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章