12-4 我还要站个大位置 - 内联块状元素
本节编程练习不计算学习进度，请电脑登录imooc.com操作

我还要站个大位置 - 内联块状元素

内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。

inline-block 元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。

 

任务

我来试一试，仿分页页码设计

在右边的代码编辑器中大家可以看到我们为 a 元素设置了宽和高，但都没有起到作用，原因是a在默认的时候是内联元素，内联元素是不可以设置宽和高的。

1.在右边编辑器的第9行，输入：

display:inline-block;
index.html 
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>内联块状元素</title>
  7.     <style type="text/css">
  8.     a {
  9.  
  10.         width: 20px;
  11.         /*在默认情况下宽度不起作用*/
  12.         height: 20px;
  13.         /*在默认情况下高度不起作用*/
  14.         background: pink;
  15.         /*设置背景颜色为粉色*/
  16.         text-align: center;
  17.         /*设置文本居中显示*/
  18.     }
  19.     </style>
  20. </head>
  21.  
  22. <body>
  23.     <a>1</a>
  24.     <a>2</a>
  25.     <a>3</a>
  26.     <a>4</a>
  27. </body>
  28.  
  29. </html>
下一节