解決相關css基礎問題

//html代碼
<div class="operateWays">
     <label>
         <input type="radio" name="Sex">
         <span>男</span>
     </label>
     <label>
         <input type="radio" name="Sex" checked="checked">
         <span>女</span>
     </label>
</div>
//css代碼
.operateWays label{
    line-height: 3rem;
    height: 3rem;
    margin-right: 5px;
    position: relative;
}
.operateWays label input[type='radio'],.operateWays label span{
    width: 50px;
    height:3rem;
    margin-top:5px;
}
.operateWays label span{
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
    text-align: center;
    border: 1px solid #ddd;
    background: #fff;
    color: #666;
    border-radius: 2px;
}
.operateWays label input[type='radio']{
    opacity: 0;
    filter: alpha(opacity=0);   
}
.operateWays label input[type='radio']:checked+span{
    background: #4A943D;
    border-color: #4A943D;
    color: #fff;                    
}
.operateWays label span:hover{
    cursor:pointer;
}

1).單選按鈕最終顯示的效果:

//css代碼
.fileinputBtn {
    height: 35px;
    position: relative;
    width: 80px;
    overflow: hidden;
}
input[type="file"] {
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: 100px;
    opacity: 0;
    filter: alpha(opacity=0);
}
.btn-success{
　　 background-color: #3a9d5d;
    border-color: #3a9d5d;
　　 -webkit-appearance: push-button;
    white-space: nowrap;
    font-size: inherit;
    -webkit-user-modify: read-only;
    margin: 0px;
}
//html代碼
<div class="fileinput-button fileinputBtn btn btn-success">
    <input type="file" name="AdPicture" data-upload-type="IMAGE" accept="image/*">
    上傳文件
</div>

2).上傳按鈕最終顯示的效果是:

3).這是一段純css清楚浮動:

/*清除浮動效果*/
.clearfix:after{
   content:"020";//或者使用"."來代替
   display:block;
   height:0;
   clear:both;
   visibility:hidden;
}
.clearfix{
    zoom:1;
}

4).bootstrap中清除浮動:

// Mixin itself
.clearfix(){&:before,&:after{content:" ";display:table;}&:after{clear:both;}}// Usage as a mixin
.element{.clearfix();}

5).css中僞類和僞元素的區別:

　　a.僞類:用於向某些選擇器添加特殊的效果(能夠用來指定一個或者多個語氣相關的選擇符的狀態)

　　b.僞元素:用於將特殊的效果添加到默寫選擇器中(是指在HTML的文檔指定的信息以外，建立了文檔的額外信息。（選擇符:僞對象{屬性：屬性值}）)

    

6).css中基本字體引用格式

基本的格式是: 
　　@font-face {
　　　　font-family: <YourWebFontName>; 　　　　src: <source> [<format>][,<source> [<format>]]*; 　　　　[font-weight: <weight>]; 　　　　[font-style: <style>]; 　　}

取值的簡單說明:
　　YourWebFontName:是指你自定義的字體名稱
　　source:指你自定義的字體的存放路徑
　　format:指你自定義字體的格式
　　weight/style:前者是定義字體的粗體,後者是定義字體樣式

/*爲了讓各個瀏覽器支持的寫法*/
@font-face { 
　　font-family: 'YourWebFontName'; 
　　src: url('YourWebFontName.eot'); 
　　src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), 
　　　　url('YourWebFontName.woff') format('woff'), 
　　　　url('YourWebFontName.ttf') format('truetype'), 
　　　　url('YourWebFontName.svg#YourWebFontName') format('svg'); 
}

 

7).設置隱藏並使用背景圖片來修飾：

　   selected::-ms-expand————下拉框(ie中刪除select的方法)

　　input::-ms-check————單選、複選框

　　input::-ms-clear————表單文本框　　

　　-moz-appearance:none; -webkit-appearance:none;————下拉框刪除默認背景圖片

 

8).在解決type="number"的問題上:

      a.移除type="number"在瀏覽器中顯示出來的上下箭頭

　　　　1.在谷歌上:

1 input::-webkit-outer-spin-button,
2 input::-webkit-inner-spin-button{
3     -webkit-appearance: none !important;
4     margin: 0; 
5 }

　　　2.在火狐上:

1 input[type="number"]{
2     -moz-appearance:textfield;
3 }

　　b.在解決type='number'的問題上,若是再蘋果手機解決不了的時候,能夠經過使用type='tel'來作替換操做