CSS style four of Notes

table of Contents

Show and hide

display

display: none; // Hide

display: block; // displayed

div{
    width:200px;
    height:200px;
    display:none;// 隐藏标签
}

p{
    
}

<div> </div>
<p>哈哈</p>

After the note hidden elements are not retained position.

visible

div{
    width:200px;
    height:200px;
    visibility:visible; //hidden 隐藏后保留位置
}

Imitation potatoes approach

a{
    display:block;
    width:448px;
    height:252px;
    margin:100px;
    position:relative;
}

.mask{
    width:;
    height:;
    background: rgba(0,0,0,0.4) url() no-repeat center;
    display:none;
}

a:hover .mask{
    display:block;
}

<a herf="#">
    <img src = "">
    <div class="mask"> 
    </div>
</a>

overflow

overflow: scroll/hidden/visible/auto

scroll总是显示滚动条
auto 随内容决定是否显示滚动条

style mouse cursor

cursor:pointer; //变成小手形状
cursor:text; // I 的样式
cursor:move; // + 的样式
 cursor:defualt; // 默认 小白箭头的样式

outline contours

outline:none;  //取消轮廓线。
轮廓线 是绝大多数表单都有的。

input{
    outline:none;
    border: 1px solid red;
    
}


textarea{
    resize:none;//防止拖拽
    outline:none;
}

Vertically aligned

vertical-align

img{
    vertical-align:middle;//中线对齐
}

默认是基线对齐的。
该属性主要用于  行内块或者行元素对齐方式。

Overflow text display ellipsis

white-space:nowrap;
overflow:hidden;
text-overflow:elipsis; //clip  

CSS sprites technology

避免多次去服务器端请求图片，使用一张大图。

Sliding doors

.nav a{
    height:33px;
    line-height:33px;
    color:#fff;
    text-decoration:none;
    background: url() no-repeat;
    display:inline-block;
    padding-left:15px;
}

.nav span{
    background: url() no-repeat right;
    display:inline-block;
    padding-right:15px;
    
}

.nav a:hover , .nav a:hover span {
    background-image: url()
}


滑动门： a 固定左侧，span展示右侧    

Fonts

Icon font

体积小 透明度 颜色  选择， 几乎所有的浏览器都支持。

Website:
icomoon
icon font (iconfont.cn)

Font

<style>
    //声明字体
    @font-face{
        font-family:"";
        
        src:
        
        font-style:normal;
    }
    
    //引用字体
    span{
        font-family:"icommon";
        color:xx;
    }
</style>