css补充知识
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
overflow溢出
值: visible | hidden | scroll | auto | inherit
初始值: visible
应用于: 块级元素、替换元素、表单元格
继承性: 无
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
.menu_login_li:hover { background-color: red; }
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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;
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
http://www.cnblogs.com/xiaohuochai/p/5249139.html
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/*---三角形---*/ .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="width: 60px;height: 50px;"> <div class="pa" style="top: -7px;right: 14px;"> <div class="triangle_edge"> <span class="triangle_block"></span> </div> </div> </div>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/*--按钮--*/ .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>