CSS小结

目录

• class
• id
• display
• background
• padding
• margin
• border
• position
• overflow
• opacity
• line-height
• font-size
• cursor

class

<div class="btn"></div>

.btn{
      background:#ddd;
}

id

<div id="btn"></div>

#btn{
      background:#ddd;
}

display

可参考

• block ：1.独占一行，可以设置 height，width ，不设置宽高则填满父容器 2.可以设置height、width 3.可以设置padding、margin
• inline ：1.和其他元素公共享一行 2.不能更改大小，由内容撑起宽和高 3.padding上下左右都有效，margin只有left、right有效
• inline-block ： 1.和其他元素共享一行 2.可以设置宽度和高度 3.可以设置padding、margin，通俗的讲就是不独占一行的块级元素

background

.btn{
     background:#ddd;
}

padding

.btn{
      display:bock;
      padding:1x 1x 1x 1x;//top right bottom left
      padding:1x 2x 1x;//top （right bottom） left
      padding:1x 2x;//（top  left ） （right bottom）
      padding:1x;//(top right bootm left)
}

margin

.btn{
      display:bock;
      maring:1x 1x 1x 1x;//top right bottom left
      maring:1x 2x 1x;//top （right bottom） left
      maring:1x 2x;//（top  left ） （right bottom）
      margin:1x;//(top right bootm left)
}

border

边框

.btn{
      border: 1px solid #ddd;
}

position

overflow

元素就能被浮动孩子给撑起高度了，详细的用法

.btn{
      overflow: hidden;
}

opacity

透明度

.btn{
      opacity: .7;
}

line-height

文字行高

.btn{
      line-height: 25px;
}

font-size

字体大小

.btn{
      font-size:12px;
}

cursor

.btn{
      cursor:pointer;
}