11-4元素分类--内联块状元素 · 初识HTML+CSS

**内联块状元素（**inline-block**）**就是同时具备内联元素、块状元素的特点，代码`display:inline-block`就是将元素设置为内联块状元素。(css2.1新增)，、标签就是这种内联块状标签。 inline-block 元素特点： 1、和其他元素都在一行上； 2、元素的高度、宽度、行高以及顶和底边距都可设置。提示：下一小节是用视频动画来讲解css中的盒模型。 ### 任务 **任务：我也来试试，仿分页页码设计** 在右边的代码编辑器中大家可以看到我们为 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{ display:inline-block; 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> ```