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>