本篇內(nèi)容介紹了“CSS中display屬性參數(shù)的特點(diǎn)是什么”的有關(guān)知識(shí),在實(shí)際案例的操作過程中,不少人都會(huì)遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
目前創(chuàng)新互聯(lián)公司已為超過千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁空間、綿陽服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、天橋網(wǎng)站維護(hù)等服務(wù),公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略,正道將秉承"和諧、參與、激情"的文化,與客戶和合作伙伴齊心協(xié)力一起成長,共同發(fā)展。
CSS中display屬性三大參數(shù)特點(diǎn)
CSS display屬性中block元素的特點(diǎn):
總是在新行上開始;高度,行高以及頂和底邊距都可控制;寬度缺省是它的容器的100%,除非設(shè)定一個(gè)寬度<div>,<p>,<h2>,<form>,<ul>和<li>是塊元素的例子。
CSS display屬性中inline元素的特點(diǎn):
和其他元素都在一行上;高,行高及頂和底邊距不可改變;寬度就是它的文字或圖片的寬度,不可改變。<span>,<a>,<label>,<input>,<img>,<strong>和<em>是inline元素的例子。
CSS display屬性中inline和block可以控制一個(gè)元素的行寬高等特性,需要切換的情況如下:
讓一個(gè)inline元素從新行開始;讓塊元素和其他元素保持在一行上;控制inline元素的寬度(對導(dǎo)航條特別有用);控制inline元素的高度;無須設(shè)定寬度即可為一個(gè)塊元素設(shè)定與文字同寬的背景色。
CSS display屬性中inline-block的元素特點(diǎn):
將對象呈遞為內(nèi)聯(lián)對象,但是對象的內(nèi)容作為塊對象呈遞。旁邊的內(nèi)聯(lián)對象會(huì)被呈遞在同一行內(nèi),允許空格。(準(zhǔn)確地說,應(yīng)用此特性的元素呈現(xiàn)為內(nèi)聯(lián)對象,周圍元素保持在同一行,但可以設(shè)置寬度和高度地塊元素的屬性)并不是所有瀏覽器都支持此屬性,目前支持的瀏覽器有:Opera、Safari在IE中對內(nèi)聯(lián)元素使用display:inline-block,IE是不識(shí)別的,但使用display:inline-block在IE下會(huì)觸發(fā)layout,從而使內(nèi)聯(lián)元素?fù)碛辛薲isplay:inline-block屬性的表癥。
從上面的這個(gè)分析,也不難理解為什么IE下,對塊元素設(shè)置display:inline-block屬性無法實(shí)現(xiàn)inline-block的效果。這時(shí)塊元素僅僅是被display:inline-block觸發(fā)了layout,而它本就是行布局,所以觸發(fā)后,塊元素依然還是行布局,而不會(huì)如Opera中塊元素呈遞為內(nèi)聯(lián)對象。
IE下塊元素如何實(shí)現(xiàn)CSS屬性display:inline-block的效果?
有兩種方法:
1、先使用display:inline-block屬性觸發(fā)塊元素,然后再定義display:inline,讓塊元素呈遞為內(nèi)聯(lián)對象(兩個(gè)display要先后放在兩個(gè)CSS聲明中才有效果,這是IE的一個(gè)經(jīng)典bug,如果先定義了display:inline-block,然后再將display設(shè)回inline或block,layout不會(huì)消失)。
代碼如下:
div{display:inline-block;...}div{display:inline;}
2、直接讓塊元素設(shè)置為內(nèi)聯(lián)對象呈遞(設(shè)置屬性display:inline),然后觸發(fā)塊元素的layout(如:zoom:1等)。
代碼如下:
div{display:inline;zoom:1;...}
“CSS中display屬性參數(shù)的特點(diǎn)是什么”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
網(wǎng)頁題目:CSS中display屬性參數(shù)的特點(diǎn)是什么
本文路徑:http://chinadenli.net/article2/joicic.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供小程序開發(fā)、網(wǎng)站營銷、服務(wù)器托管、網(wǎng)站改版、網(wǎng)頁設(shè)計(jì)公司、網(wǎng)站內(nèi)鏈
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)