内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。
inline-block 元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
练习
新建示例页面demo.html，示例代码如下
任务：我也来试试，仿分页页码设计
在示例页面代码中大家可以看到我们为 a 元素设置了宽和高，但都没有起到作用，原因是a在默认的时候是内联元素，内联元素是不可以设置宽和高的。
1.在示例页面代码中的第8行，输入：
display:inline-block;
示例代码
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>内联块状元素</title>
<style type="text/css">
a{
width:20px;/*在默认情况下宽度不起作用*/
height:20px;/*在默认情况下高度不起作用*/
background:pink;/*设置背景颜色为粉色*/
text-align:center; /*设置文本居中显示*/
}
</style>
</head>
<body>
<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>
</body>
</html>总结
一、块级元素：
（1）每个对元素（标签）占一行。
（2）元素宽度和高度可变：注意是元素容器大小可变不是元素装的数字大小可变
（3）转换：1、转换成内联级：display：inline 2、转换成内联块状级：display：inline-block
二、内联级
（1）各元素在同一行
（2）元素（容器）大小不可变
（3）转换：1、转换为块级：display：block ；2、转换成内联块级：display：inline-block；
三、内联块级
元素大小可变
此文章本站原创，地址 https://www.vxzsk.com/1378.html
转载请注明出处！谢谢！
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程
上一篇：9.2、CSS元素分类--内联元素
下一篇：9.4、CSS盒模型--边框（一）
^