css世界之display-CFANZ编程社区

css世界之display

block：块级元素，独占一行具有width，height属性，无论width设置的值是什么，另一个块级元素都会换行显示
inline：内联元素，可与其他内联元素在同一行显示，只有一行显示不下时才会换行，在设置padding的时候，css显示会生效，但是不影响其他元素，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果，注意元素范围是增大了，但是对元素周围的内容是没影响的。水平方向的设置是可以起作用的
inline-block：外部表现为inline对象，可以与其他元素一行显示。但是具有block的宽高属性。使其既具有block的宽度高度特性又具有inline的同行特性。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      *{
        margin:0;
        padding:0;
        list-style:none;
        border:0;
      }
      .a1{
        background:pink;
        margin-top:30px;
        margin-bottom: 30px;
        padding-top: 20px;
        padding-bottom: 20px;
        display: inline-block; #或者去掉看下效果
      }
      .div1{
        width: 100px;
        height:100px;
        background:green;
      }
    </style>
  </head>
  <body>
    <a class="a1">CSDN</a>
    <span> this is test</span>
    <div class="div1"></div>
  </body>
</html>

0 条评论