css补充知识

overflow溢出

　　值: visible | hidden | scroll | auto | inherit

　　初始值: visible

　　应用于: 块级元素、替换元素、表单元格

　　继承性: 无

.menu_login_li:hover {
                         background-color: red;
                        }

    <div id="frame">
        <div class="item">
            <span>test</span>
        </div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

.item {
    display: inline-block;
    width: 180px;
    height: 100px;
    background-color: yellow;
}



因为display: inline-block成了内联，inline box有一个叫做baseline的东西，想要更改很简单只要vertical-align: top;和vertical-align: bottom;

http://www.cnblogs.com/xiaohuochai/p/5249139.html

/*---三角形---*/

.triangle_edge{
  width:0;
  height:0;
  border-width:0 7px 7px;
  border-style:solid;
  border-color:transparent transparent #333;/*透明 透明  灰*/
  position:relative;
}
.triangle_block{
  display:block;
  width:0;
  height:0;
  border-width:0 8px 8px;
  border-style:solid;
  border-color:transparent transparent #ffffff;/*透明 透明  黄*/
  position:absolute;
  top:1px;
  left:-8px;
}

.triangle_frame{
  height: auto;
  width: 80px;
  background: white;border-radius: 3px;
  box-shadow:5px 5px 20px rgba(44, 44, 44, 0.37);
  border: 1px solid rgba(0,0,0,0.44);
}

/*---三角形end---*/


<div class="triangle_frame pr" style=" 60px;height: 50px;">
    <div class="pa" style="top: -7px;right: 14px;">
    <div class="triangle_edge">
    <span class="triangle_block"></span>
    </div>
    </div>
</div>
                                               
    

/*--按钮--*/
.own-bt{
  height: 26px;
  width: 90px;
  line-height: 26px;
  cursor: pointer;
  display: inline-block;
  box-shadow:0 1px 3px rgba(0, 0, 0, 0.11);
  border-radius: 2px;
  border-width:1px 1px 1px 1px;
  border-style:solid;
  border-color: rgb(219, 219, 219);/*透明 透明  灰*/
  z-index: 20;
}

.own-bt ul{
  padding: 0;
  margin: 0;
  background: white;
  border-radius: 2px;
  border-width:1px 1px 1px 1px;
  border-style:solid;
  border-color: #d8d8d8;/*透明 透明  灰*/
  box-shadow:5px 5px 20px rgba(44, 44, 44, 0.24);
  z-index: 10;
  display: none;
}

.own-bt:hover ul{
  display: block;
}

.own-bt:hover ul li:hover{
  background: #efefef;
}
/*--按钮end--*/

<div class="own-bt">
    <div>
    <span>+</span>
    <span>关注</span>
    </div>
    <ul>
        <li>取消关注</li>
    </ul>
</div>