<style>
    div{
       /* margin是外边距 1 2 3 4 分别对应 上 下 左 右  */
       margin:1 2 3 4; 
       /* padding是内边距 上下左右的边距都是33px */
       padding:33px;       
        }
  </style>

<style>
div{
     /* border是边框 3px是边框的粗细 soshed是边框的样式 black是边框的颜色 */
     border: 3px soshed black;
      }
</style>

<style>
div{
     /* border是边框 10px是边框的粗细 solid是边框的样式 blue是边框的颜色 */
     border: 10px solid blue;
     border-radius: 100px;  //100px这是圆角边框 这个值可以随便改很好玩的
      }
</style>

<style> 
div{
   width:300px;  //宽
   height:100px;  //高
   background-color:#ff9900;  //颜色
   -moz-box-shadow: 10px 10px 5px #888888; 老的 Firefox 
   box-shadow: 10px 10px 5px #888888; //box-shadow 属性向框添加一个或多个阴影
   }
</style>

<style> 
div{
   display: inline-block;  //将对象呈现为inline对象, 但是对象的作为daoblock对象呈现
   float:right;  //float浮动 right右
   clear: right;  //右侧不允许有浮动元素
   clear: left;  //左侧不允许有浮动元素
   clear: both;  //两侧都不允许有浮动元素
   }
</style>

<style> 
div{
   //固定定位
   position: fixed;
   //绝对定位    没有父级元素定位的前提下, 相对浏览器定位
   position: absolute;
   //相对定位
   position: relative;
   }
</style>

<style> 
div{
    opacity: 0.5;
   }
</style>

<style>
 p{
     position:absolute;  //绝对定位
     left:0px;  //左侧
     top:0px;   //top规定元素的顶部边缘
     z-index:-1;
 }
</style>

<style> 
 div {
     width: 100px;  //宽
     height: 100px;  //高
     background-color: red; //颜色
     animation-name: example;  //animation-name 属性为 @keyframes 动画规定名称
     animation-duration: 4s; //4秒
 }

@keyframes example {    //animation-name 属性为 @keyframes 动画规定名称
         from {background-color: red;}  //变化颜色
         to {background-color: yellow;}  //最后颜色
          }
</style>