zoukankan      html  css  js  c++  java
  • 第二十七节 内联块属性

     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>
  • 相关阅读:
    dirs命令
    pwd命令
    ls命令
    rmdir命令
    install命令和cp命令的区别
    ./configure,make,make install的作用
    install 命令
    Make 命令
    linux configure使用方法
    Linux下which、whereis、locate、find命令的区别
  • 原文地址:https://www.cnblogs.com/kogmaw/p/12420685.html
Copyright © 2011-2022 走看看