溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“css中display:inline-block怎么用”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“css中display:inline-block怎么用”這篇文章吧。
偽類選擇器hover可以在鼠標移到鏈接上時設置一些特殊樣式，比如字體大小,背景顏色，顯示隱藏等等。
注意：偽類選擇器hover可以作用于所有元素，不僅僅是鏈接。
與hover類似的選擇器還有link，visited，active。link選擇器可以設置未被訪問過的鏈接樣式，visited選擇器可以設置已被訪問過的鏈接樣式，active選擇器可以設置被激活的鏈接樣式。不清楚的同學可以參考CSS視頻教程。
用法1：當鼠標經過鏈接時改變其自身的樣式（hover后面直接接樣式）
描述：當鼠標經過時，a標簽的字體顏色變為紅色，字體變大，代碼如下：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<styletype="text/css">
.aa{text-decoration:none;color:#000000;}
.aa:hover{color:red;font-size:20px;}
</style>
</head>
<body>
歡迎大家來PHP中文網學習交流
</body>
</html>
第一張圖是原來的效果，第二張圖是鼠標經過后實現的效果。
bb0.jpg
bb1.jpg
用法2：用偽類選擇器hover控制其子元素的樣式（hover后面加空格再接要改變元素的樣式）
描述：當鼠標經過時div時，其子元素的顏色變為紫色，字體變大，出現紅色邊框，代碼如下：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<styletype="text/css">
.aa{text-decoration:none;color:#000000;}
.box:hover.aa{color:purple;font-size:30px;border:1pxsolidred;}
</style>
</head>
<body>
<divclass="box">
望子成龍，望女成鳳
</div>
</body>
</html>
效果如下圖所示：
bb3.jpg
用法3：當鼠標經過時控制其兄弟元素的樣式（hover后面加“+”再接要改變元素的樣式）
描述：鼠標經過時其兄弟元素的背景顏色變為黃色，字體變大，代碼如下：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<styletype="text/css">
.aa{text-decoration:none;color:#000000;}
.box1:hover+.box2{font-size:30px;background:yellow;}
</style>
</head>
<body>
<divclass="box1">床前明月光</div>
<divclass="box2">疑是地上霜</div>
</body>
</html>
效果圖：
bb5.jpg
以上給大家介紹了CSS中偽類選擇器hover的使用方法，初學者可以自己動手嘗試，看看你的代碼能不能實現效果，希望這篇文章對你有所幫助！我們知道box-direction屬性可以設置彈性盒子內部“子元素”的排列順序。在CSS3彈性盒子模型中，我們還可以使用box-ordinal-group屬性來設置每個“子元素”在彈性盒子中的“準確”顯示位置。
box-ordinal-group屬性取值是一個自然數，從1開始，用來設置子元素的位置序號。子元素的分布將根據這個屬性值從小到大進行排列。在默認情況下，子元素將根據元素的位置進行排列。
注意，對于沒有指定box-ordinal-group屬性值的子元素，則該子元素的序號默認都為1。并且序號相同的子元素將按照它們在HTML文檔中加載的順序進行排列。
我們先看個例子，再來回顧一下這些知識點：
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3box-ordinal-group屬性</title>
<styletype="text/css">
body
{
display:-webkit-box;
-webkit-box-orient:horizontal;/*定義盒子元素內的元素從左到右流動顯示*/
}
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;
}
</style>
</head>
<body>
<divid="box1">盒子1</div>
<divid="box2">盒子2</div>
<divid="box3">盒子3</div>
</body>
</html>
微信截圖_20181023153640.png首先我們應該知道inline-block元素的含義
display:inline-block不設置寬度時，內容撐開寬度；不會獨占一行，支持寬高，代碼換行被解析成空格，總而言之，inline-block包含了行內元素和塊內元素的特點，即設置了inline-block屬性的元素既擁有了block元素可以設置width和height的特性，又保持了inline元素不換行的特性。
知道了inline-block的含義后，我們接著就來看一看inline-block該怎么用?
inline-block元素的用法：
一切需要行內排列并且可設置大小的需求就可以用inline-block來實現；比如我們可以利用inline-block進行布局，下面我們就來看看具體的示例，我們可以用inline-block元素來實現導航欄，代碼如下：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Document</title>
<style>
div{
width:30%;
background:lightblue;
height:100px;
text-align:center;
line-height:100px;
}
a{
color:#fff;
text-decoration:none;
display:inline-block;
width:100px;
height:30px;
line-height:30px;
background:orange;
}
</style>
</head>
<body>
<div>
首頁
視頻
工具
登錄
</div>
</body>
</html>
inline-block元素實現效果如下：
上述效果我們可以看到每個鏈接之間都會有一個空隙，這個空隙是怎么出現的呢？這個空隙其實是由換行符、制表符（tab）、空格等字符引起的，要想將這個空隙去掉我們有一下幾種方法：
方法一：把所有的代碼都寫到一行，便不會產生空隙了；但是這種方法代碼過多時會顯得很亂，所以代碼多時并不推薦。
方法二：在父元素的css中設置word-spacing負值
方法三：對父元素添加，{font-size:0}，即將字體大小設為0，那么那個空白符也變成0px，從而消除空隙。
以上是“css中display:inline-block怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
