CSS样式四之注意事项

目录

显示与隐藏

display

display:none; //隐藏

display:block; //显示出来

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

p{
    
}

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

注意 隐藏后，元素不保留位置。

visible

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

仿土豆的做法

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 随内容决定是否显示滚动条

cursor鼠标样式

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

outline 轮廓线

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

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


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

垂直对齐

vertical-align

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

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

溢出文字显示省略号

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

CSS精灵技术

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

滑动门

.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展示右侧    

字体

图标字体

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

网站：
icomoon
icon font (iconfont.cn)

使用字体

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