这篇文章主要为大家展示了“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进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
