下面簡單介紹下:
1、實(shí)例演示效果 
2、display:inline-block作用?
使用display:inline-block屬性,可以使行內(nèi)元素或塊元素能夠變成行內(nèi)塊元素,簡單直白點(diǎn)講就是不加float屬性就可以定義自身的寬、高,同時(shí)又能使該元素輕松在父元素居中顯示!
3、什么時(shí)候會用到display:inline-block?
在網(wǎng)站布局中,很多時(shí)候,子元素中使用行內(nèi)元素如span或塊元素li標(biāo)簽且標(biāo)簽個(gè)數(shù)不定,而我們又想讓這一塊不管個(gè)數(shù)有多少個(gè)(子元素的總體寬度不定),始終都能居中顯示!這個(gè)時(shí)候display:inline-block就能派上用場了!
4、ie6/7支持display:inline-block這個(gè)屬性嗎?
在內(nèi)聯(lián)元素上定義display:inline-block屬性,發(fā)現(xiàn)IE6、IE7中的顯示效果同其它瀏覽器一致,但事實(shí)是ie7及更低版本的ie瀏覽器不支持display:inline-block這個(gè)屬性!
正確的解釋是"使用inline-block屬性在IE下會觸發(fā)layout,因此元素上設(shè)置的width、height是能生效的,所以也就有了同其它瀏覽器一致的顯示效果",而不能說IE6/7支持 display:inline-block!
5、行內(nèi)元素只需定義display:inline-block,顯示效果各瀏覽器都是一致,IE7下塊元素如何實(shí)現(xiàn) display:inline-block 的效果??
在IE下,display: inline-block只是觸發(fā)了元素的layout。比如將display: inline-block設(shè)置到div上,只能保證這個(gè)div擁有塊元素的特征(可以設(shè)置寬度,高度等),但還是會產(chǎn)生換行。接下來要設(shè)置display: inline,使其不產(chǎn)生換行。將display:inline-block;*display:inline;寫在同一個(gè)樣式上,inline-block屬性是不會觸發(fā)元素的layout的,因此我們還要額外加上 *zoom:1來觸發(fā)layout!
6、IE7下塊元素如何兼容 display:inline-block寫法?
實(shí)際有效的方法共有2種:
方法1:直接讓塊元素設(shè)置為內(nèi)聯(lián)對象呈遞(設(shè)置屬性 display:inline),然后觸發(fā)塊元素的 layout(如:zoom:1 等)。兼容各瀏覽器的代碼如下: div {display:inline-block;*display:inline; *zoom:1;...}
新聞熱點(diǎn)
疑難解答
圖片精選