1 <!DOCTYPE html> 2 <!-- 3、内联块：也叫行内块，是新增的元素类型，现有的元素类型没有归于此类，img和input元素的行为类似这种元素，但是也归类于内联元素，我们可以用display属性将块元素或者内联元素转化成这种元素。他们在布局中表现的行为： 3 a、支持全部样式 4 b、如果没有设置宽高，宽高由内容决定 5 c、盒子并行在一行 6 d、代码换行，盒子产生间距 7 e、子元素是内联块元素，父元素可以用text-align属性设置子元素的水平对其方式 --> 8 <html lang="en"> 9 <head> 10 <meta charset="UTF-8"> 11 <title>内联块实例</title> 12 <style type="text/css"> 13 14 .box{ 15 width:600px; 16 height:600px; 17 border:1px solid #000; 18 font-size:0; 19 } 20 .box a{ 21 width:60px; 22 height:60px; 23 background-color:red; 24 display: inline-block; /* 设置为内联模块 */ 25 font-size: 16px; 26 27 } 28 29 </style> 30 </head> 31 <body> 32 <div class="box"> 33 <a href="#">链接一</a> 34 <a href="#">链接二</a> 35 <a href="#">链接三</a> 36 <a href="#">链接四</a> 37 </div> 38 </body> 39 </html>