這篇文章主要為大家展示了“css中display:inline-block怎么用”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“css中display:inline-block怎么用”這篇文章吧。
公司主營業(yè)務(wù)：成都做網(wǎng)站、成都網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè)、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出伊金霍洛免費(fèi)做網(wǎng)站回饋大家。
偽類選擇器hover可以在鼠標(biāo)移到鏈接上時設(shè)置一些特殊樣式，比如字體大小,背景顏色，顯示隱藏等等。
注意：偽類選擇器hover可以作用于所有元素，不僅僅是鏈接。
與hover類似的選擇器還有l(wèi)ink，visited，active。link選擇器可以設(shè)置未被訪問過的鏈接樣式，visited選擇器可以設(shè)置已被訪問過的鏈接樣式，active選擇器可以設(shè)置被激活的鏈接樣式。不清楚的同學(xué)可以參考CSS視頻教程。
用法1：當(dāng)鼠標(biāo)經(jīng)過鏈接時改變其自身的樣式（hover后面直接接樣式）
描述：當(dāng)鼠標(biāo)經(jīng)過時，a標(biāo)簽的字體顏色變?yōu)榧t色，字體變大，代碼如下：
.aa{text-decoration:none;color:#000000;}
.aa:hover{color:red;font-size:20px;}
歡迎大家來PHP中文網(wǎng)學(xué)習(xí)交流
第一張圖是原來的效果，第二張圖是鼠標(biāo)經(jīng)過后實(shí)現(xiàn)的效果。
bb0.jpg
bb1.jpg
用法2：用偽類選擇器hover控制其子元素的樣式（hover后面加空格再接要改變元素的樣式）
描述：當(dāng)鼠標(biāo)經(jīng)過時div時，其子元素的顏色變?yōu)樽仙煮w變大，出現(xiàn)紅色邊框，代碼如下：
.aa{text-decoration:none;color:#000000;}
.box:hover.aa{color:purple;font-size:30px;border:1pxsolidred;}
望子成龍，望女成鳳
效果如下圖所示：
bb3.jpg
用法3：當(dāng)鼠標(biāo)經(jīng)過時控制其兄弟元素的樣式（hover后面加“+”再接要改變元素的樣式）
描述：鼠標(biāo)經(jīng)過時其兄弟元素的背景顏色變?yōu)辄S色，字體變大，代碼如下：
.aa{text-decoration:none;color:#000000;}
.box1:hover+.box2{font-size:30px;background:yellow;}
效果圖：
bb5.jpg
以上給大家介紹了CSS中偽類選擇器hover的使用方法，初學(xué)者可以自己動手嘗試，看看你的代碼能不能實(shí)現(xiàn)效果，希望這篇文章對你有所幫助！我們知道box-direction屬性可以設(shè)置彈性盒子內(nèi)部“子元素”的排列順序。在CSS3彈性盒子模型中，我們還可以使用box-ordinal-group屬性來設(shè)置每個“子元素”在彈性盒子中的“準(zhǔn)確”顯示位置。
box-ordinal-group屬性取值是一個自然數(shù)，從1開始，用來設(shè)置子元素的位置序號。子元素的分布將根據(jù)這個屬性值從小到大進(jìn)行排列。在默認(rèn)情況下，子元素將根據(jù)元素的位置進(jìn)行排列。
注意，對于沒有指定box-ordinal-group屬性值的子元素，則該子元素的序號默認(rèn)都為1。并且序號相同的子元素將按照它們在HTML文檔中加載的順序進(jìn)行排列。
我們先看個例子，再來回顧一下這些知識點(diǎn)：
body
{
display:-webkit-box;
-webkit-box-orient:horizontal;/*定義盒子元素內(nèi)的元素從左到右流動顯示*/
}
div{height:100px;line-height:100px;}
#box1
{
background:red;
-webkit-box-ordinal-group:2;
}
#box2
{
background:blue;
-webkit-box-ordinal-group:3;
}
#box3
{
background:yellow;
-webkit-box-ordinal-group:1;
}
重慶分公司
重慶分公司