第二十七节 内联块属性 

 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>

 

posted @ 2020-03-05 15:50  kog_maw  阅读(103)  评论(0)    收藏  举报